溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css中img不知道寬高如何實現居中”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
3種方法：1、利用text-align屬性，給包含img的父元素設置“text-align: center;”即可。2、利用彈性盒布局，給父元素設置“display: flex;justify-content: center;”即可。3、利用柵格布局，給父元素設置“display:grid;align-items:center;justify-items:center;”即可。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
方法1：利用文本對齊屬性text-align
text-align控制元素中文本行的對齊方式。可以給img設一個父輩的div，這樣img就可以是div的文本，然后用text-align修改div屬性。（在父輩元素添加屬性）
注意：子元素必須是inline或inline-block；如果子元素也是div的話，需要給子元素設置display：inline/inline-block. 這里子元素img是inline所以省略這一步。該方法適用于inline元素上，比如img的居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#pic {
border: 1px solid red;
text-align: center; /*表示div的子元素居中*/
}
</style>
</head>
<body>
<div id="pic">
<img src="img/2.jpg" class="logo">
</div>
</body>
</html>
方法2：利用彈性盒布局
css
#pic {
display: flex;
justify-content: center;
}
彈性盒布局可以使用少數幾行css實現幾乎所有的布局。而且最神的是，即便是n個圖片上面兩行都可以實現居中，而不必考慮圖片布局和位置。
方法3：利用柵格布局
彈性盒用在導航欄是最普遍的。與之相比，柵格布局是普適的布局系統。
#pic {
display: grid;
align-items: center; /*塊級方向（縱向）上的全部柵格元素居中對齊*/
justify-items: center; /*行內方向（橫向）所有的元素中線對齊*/
}
“css中img不知道寬高如何實現居中”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
