居中方法:1、為盒子設定相對定位、圖片設定絕對定位;然後調整圖片位置即可。 2.將img圖片元素設定為區塊級元素;然後利用table-cell、「vertical-align:middle;」來居中。 3.利用flexbox佈局來居中。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
css讓圖片在div盒子裡居中
#第一種:用css的position屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .div1 { width: 200px; height: 200px; border: 1px solid #000000; position: relative; } img { width: 100px; height: 100px; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } </style> </head> <body> <div class="div1"> <img src="img/1.jpg" / alt="css盒子中的圖如何居中" > </div> </body> </html>
效果圖:
第二個:利用css3的新增屬性table-cell, vertical-align:middle;
#
nbsp;html> <meta> <style> .div { width: 200px; height: 200px; border: 1px solid #000000; display: table-cell; vertical-align: middle; } img { width: 100px; height: 100px; display: block; margin: auto; } </style> <div> <img alt="css盒子中的圖如何居中" > </div>效果:
【推薦教學:CSS影片教學
】###<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .div { width: 200px; height: 200px; border: 1px solid #000000; display: flex; /*!*flex-direction: column;*!可写可不写*/ justify-content: center; align-items: center; } img { width: 100px; height: 100px; display: block; margin: auto; } </style> </head> <body> <div class="div"> <img src="img/1.jpg" / alt="css盒子中的圖如何居中" > </div> </body> </html>###效果:###################第四種:利用transform的屬性(缺點:需要支援Html5)### ###
nbsp;html> <meta> <style> .div { width: 200px; height: 200px; border: 1px solid #000000; position: relative; } img { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <div> <img alt="css盒子中的圖如何居中" > </div>###效果圖:###############更多程式相關知識,請造訪:###程式設計影片###! ! ###
以上是css盒子中的圖如何居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!