HTML 怎么讓圖片居中這個看似簡單的問題,卻有非常多的解決方案可以選擇,下面 W3Cschool 小編會具體的和大家分享一下各種實現(xiàn) HTML 圖片居中的方法,希望能對各位有所幫助。
圖片水平居中有兩種常用方式:
1、使用?text-align: center
?實現(xiàn)
<div style="text-align: center; width: 500px; ">
<img alt="w3cschool logo" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" style="display: inline-block;" />
</div>
2、使用利用?margin: 0 auto
?實現(xiàn)
<div style="text-align: center; width: 500px;">
<img alt="w3cschool logo" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" style="margin: 0 auto;" />
</div>
圖片水平居中有兩種常用方式:
1、使用行高實現(xiàn)圖片垂直居中
<div style="text-align: center; width: 500px;height:200px; line-height:200px; ">
<img alt="w3cschool logo" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" style="display: inline-block; vertical-align: middle;" />
</div>
2、使用絕對定位實現(xiàn)圖片垂直居中
<div style="width: 500px;height:200px; position: relative;">
<img alt="w3cschool logo" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</div>
HTML 怎么讓圖片居中就為大家介紹到這里了,想要深入學(xué)習(xí)的朋友也可以到我們的HTML專區(qū)進(jìn)行學(xué)習(xí)。