css圖片居中方法:使用margin屬性設置圖片上下左右邊距,居中圖片。使用text-align屬性設置容器文本居中,并使用display: block;和margin: 0 auto;轉換圖片為塊狀元素并居中。
CSS 圖片居中代碼
為了讓圖片在網頁中居中顯示,可以使用 CSS 中的 margin
和 text-align
屬性。
方法 1:使用 margin 屬性
使用 margin
屬性,可以設置圖片上下左右的邊距,從而使其居中。
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">img { margin: 0 auto; }</code>
登錄后復制
方法 2:使用 text-align 屬性
text-align
屬性可以設置文本的水平對齊方式,也可以將其應用于圖片。
<code class="css">div { text-align: center; } img { display: block; margin: 0 auto; }</code>
登錄后復制
在第二個方法中,div
元素設置了文本居中,而 img
元素使用 display: block;
將自身轉換為塊狀元素,然后使用 margin: 0 auto;
居中。
注意事項:
對于方法 1,如果圖片寬度大于容器寬度,它可能不會居中。
對于方法 2,div
元素必須足夠寬以容納圖片。
margin: 0 auto;
僅對塊狀元素有效。因此,如果圖片不是塊狀元素(例如 inline
元素),則需要將其轉換為塊狀元素(例如,使用 display: block;
)。