html怎么讓圖片居中 各種方式總有適合你的

HTML 怎么讓圖片居中這個看似簡單的問題，卻有非常多的解決方案可以選擇，下面 W3Cschool 小編會具體的和大家分享一下各種實(shí)現(xiàn) HTML 圖片居中的方法，希望能對各位有所幫助。

圖片水平居中有兩種常用方式：

1、使用?text-align: center?實(shí)現(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?實(shí)現(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、使用行高實(shí)現(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、使用絕對定位實(shí)現(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í)。