溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS如何讓圖片在文章內容中自動居中，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
首先要調整的，是讓圖片獨占一行空間。
補充CSS知識點：
圖像（<img>標簽）默認是行內樣式（inline style），行內樣式的大體意思是，它前邊或后邊的HTML標簽元素會緊挨著排在它的前后（如影隨形），不會另換一行;而像DIV標簽則默認是塊級元素，塊級元素前后的標簽元素會換行。因此需要把文章內容中的圖片樣式由行內樣式更換為block塊級元素，要不就易和文字內容糾纏在一起。
簡單點：
block元素將顯示為塊級元素，此元素前后會帶有換行符。
inline默認。元素會被顯示為內聯元素，元素前后沒有換行符。
在原有的控制圖像的樣式中增加：display: block。
.entry img {
max-width: 100%;
height: auto;
display: block;
}
圖像設為塊級元素后，需要讓圖像居中。居中用的同樣是網頁布局時整體居中的代碼，即margin:0 auto，0可以改為任何數據，像素或EM；重要的是AUTO屬性，因為它控制元素左右的距離，AUTO則是用于居中的屬性。
實例：
.entry img {
max-width: 100%;
height: auto;
display: block;
margin:0 auto;
}
經以上設置后，圖像已能自動在文章內容中居中。但在實踐中，發現一些舊的網頁文章，在發布時其圖像有行內樣式，如：<img style=”margin:0;”>這樣的。由于行內樣式的優先（層疊）級別高于外部樣式表中的圖像自動居中的定義，因此剛才定義的：margin:0 auto就失效了。
這也不是問題，給這個居中用!important指定為最優先級別。最樣使用的樣式如下。
.entry img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto !important;
}
以上是“CSS如何讓圖片在文章內容中自動居中”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
