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