CSS如何讓圖片在文章內(nèi)容中自動居中

小編給大家分享一下CSS如何讓圖片在文章內(nèi)容中自動居中，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

 首先要調(diào)整的，是讓圖片獨占一行空間。

補充CSS知識點：

圖像（<img>標簽）默認是行內(nèi)樣式（inline   style），行內(nèi)樣式的大體意思是，它前邊或后邊的HTML標簽元素會緊挨著排在它的前后（如影隨形），不會另換一行;而像DIV標簽則默認是塊級元素，塊級元素前后的標簽元素會換行。因此需要把文章內(nèi)容中的圖片樣式由行內(nèi)樣式更換為block塊級元素，要不就易和文字內(nèi)容糾纏在一起。

簡單點：

• block元素將顯示為塊級元素，此元素前后會帶有換行符。

• inline默認。元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。

在原有的控制圖像的樣式中增加：display: block。

.entry img {

max-width: 100%;

height: auto;

display: block;

}

圖像設(shè)為塊級元素后，需要讓圖像居中。居中用的同樣是網(wǎng)頁布局時整體居中的代碼，即margin:0 auto，0可以改為任何數(shù)據(jù)，像素或EM；重要的是AUTO屬性，因為它控制元素左右的距離，AUTO則是用于居中的屬性。

實例：

.entry img {

max-width: 100%;

height: auto;

display: block;

margin:0 auto;

}

經(jīng)以上設(shè)置后，圖像已能自動在文章內(nèi)容中居中。但在實踐中，發(fā)現(xiàn)一些舊的網(wǎng)頁文章，在發(fā)布時其圖像有行內(nèi)樣式，如：<img   style=”margin:0;”>這樣的。由于行內(nèi)樣式的優(yōu)先（層疊）級別高于外部樣式表中的圖像自動居中的定義，因此剛才定義的：margin:0  auto就失效了。

這也不是問題，給這個居中用!important指定為最優(yōu)先級別。最樣使用的樣式如下。

.entry img {

max-width: 100%;

height: auto;

display: block;

margin: 0 auto !important;

}

以上是“CSS如何讓圖片在文章內(nèi)容中自動居中”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！