在 HTML5 中,我們可以使用以下代碼來將圖片居中:
<style> img { display: block; /* 將圖片轉換為塊級元素 */ margin: 0 auto; /* 設置左右的外邊距為 auto */ } </style>以上代碼中,我們使用了 display 屬性將圖片轉換為塊級元素。因為在默認情況下,圖片是行內元素,無法設置外邊距。而塊級元素可以設置外邊距,且默認情況下寬度為100%。因此,我們需要將其轉換為塊級元素,才能設置其居中樣式。 接著,我們使用 margin 屬性來設置左右的外邊距為 auto。這個技巧在許多場景下被廣泛使用,可以很方便地實現水平居中。其中,margin 的四個值分別代表上下左右四個方向的外邊距。如果只設置左右方向的外邊距為 auto,則表示讓瀏覽器自動分配左右空間,從而將元素居中。 最后,我們將以上代碼放入頭部樣式中即可。在使用時,只需要將圖片包裹在一個
<div>
元素內,并給該元素設置居中樣式即可。以上就是居中圖片的 HTML5 代碼,希望對大家有所幫助。
上一篇vue 引用外部css
下一篇vue css 重復加載