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" alt="css中img不知道寬高怎麼實現居中" > </div> </body> </html>
方法2:利用彈性盒佈局
css
#pic { display: flex; justify-content: center; }
彈性盒佈局可以使用少數幾行css實現幾乎所有的佈局。而且最神的是,即使是n個圖片上面兩行都可以實現居中,而不必考慮圖片佈局和位置。
方法3:利用柵欄佈局
彈性盒用在導覽列是最普遍的。與之相比,柵格佈局是普適的佈局系統。
#pic { display: grid; align-items: center; /*块级方向(纵向)上的全部栅格元素居中对齐*/ justify-items: center; /*行内方向(横向)所有的元素中线对齐*/ }
所以能夠非常方便的處理多張圖片對齊的問題。
(學習影片分享:web前端)
以上是css中img不知道寬高怎麼實現居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!