圖片水平居中可以通過 css 的 margin 或 text-align 屬性實現。1. 使用 margin: 0 auto; 設置左右外邊距自動計算,實現居中。2. 設置容器 text-align: center;,將圖片元素 display: inline-block;,使其作為內聯塊元素居中。
CSS實現圖片水平居中的屬性
在CSS中,可以通過設置margin
或text-align
屬性來實現圖片水平居中。
1. 使用margin屬性
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">img { margin: 0 auto; }</code>
登錄后復制
margin
屬性設置圖片元素的上下左右外邊距。通過設置margin: 0 auto;
,將左右外邊距設置為auto
,這意味著瀏覽器會自動根據容器的寬度計算左右外邊距,從而實現圖片水平居中。
2. 使用text-align屬性
<code class="css">.container { text-align: center; } img { display: inline-block; }</code>
登錄后復制
text-align
屬性設置容器內元素的文本對齊方式。通過設置.container { text-align: center; }
,將容器的文本對齊方式設置為居中。再將圖片元素設置為display: inline-block;
,使其成為一個內聯塊元素,從而實現圖片水平居中。