css 單行圖片文字水平垂直居中匯總
(1) 水平居中
a. 行內元素水平居中
因為img是行內元素(行內塊級元素也一樣)父級元素設置text-align:center即可，例如：
<div style="width: 600px; height: 300px; border:1px solid red;text-align: center;" >
<img src="static/images/banner.png" style="width: 200px; height: 200px;">
</div>
b. 塊級元素水平居中
塊級元素定寬後設置margin:0 auto(第一個數值視情況而定)即可，例如
<div style="width: 600px; height: 300px; border:1px solid red;" >
<img src="static/images/banner.png" style="width: 200px; height: 200px; display: block; margin: 0 auto;">
</div>
(2) 垂直居中
- 作為背景圖片定好寬高，設置background屬性 ，例如
.bg-center{
background:url(‘static/images/banner.png‘) no-repeat;
background-position: center center;
}
- 非背景圖設置圖片position:absolute; 設置left top 距離即可，例如
<div style="width: 600px; height: 600px; border:1px solid red; position: relative" >
<img src="static/images/banner.png" style="width: 200px; height: 200px; position: absolute; left: 200px;top:200px;">
註：如果子元素絕對定位父級需要添加position:relative 樣式。
(3) 圖片文字垂直居中
- flex方式(要求支持flex) 例:
兼容性：https://blog.csdn.net/m0_37142141/article/details/79709747
<div style="width: 300px;height: 60px; border:1px solid red; display: flex;align-items: center;">
<div style="flex:0 0 48px;border:1px solid green;font-size: 0;">
<img src="static/images/banner.png" style="width: 48px;height: 48px; ">
</div>
<div style="flex: 1;border:1px solid green;">abc123我是</div>
</div>
效果圖：
- 背景圖片形式（推薦方式）
<div style="width: 300px;height: 60px; border:1px solid red; background: url(‘static/images/banner.png‘) no-repeat;background-size: 48px 48px; background-position: left center; padding-left: 48px; line-height: 60px;">
abc123我是
</div>
效果圖：
如果只有圖片沒有文字的話可以參照(2)中的方法，另外下面代碼也可以實現
<div style="width: 300px;height: 60px; border:1px solid red;line-height: 60px; font-size: 0;">
<img src="static/images/banner.png" style="width: 48px;height: 48px; vertical-align: middle;">
</div>
效果圖：
好了到此結束。
css 單行圖片文字水平垂直居中匯總