图文对齐居中的几种方式

总结图文居中的几种方式

1.方法一

css
#target{
width: 150px;
border:1px purple solid;
line-height: 40px;
text-indent: 40px;
background-image: url('icon.png');
background-repeat: no-repeat;
background-position: 0px center;
}
html
<div id="target">
我是维修
</div>

效果图

代码解释
将图片作为背景图，然后使用 background-position 将背景图居中，使用 text-align 将文字居中，这样就达成了图文居中。

2.方法二

css
#target{
width: 150px;
height: 40px;
border:1px purple solid;
}
#helper{
display: inline-block;
width: 2px;
height: 100%;
background-color: red;
}
#target img{
vertical-align: middle;
}
#target span{
vertical-align: middle;
}

html
<div id="target">
<span id="helper"></span>
<img src="icon.png">
<span>我是维修</span>
</div>

效果图

代码解释
在#target内创建一个用于辅助居中对齐的子元素#helper，该元素的高应该与父元素等高，然后使用vertical-align=middle即可居中对齐。
但是一般来说，为了不影响代码结构，一般我们会使用伪元素before或者after来代替#helper，即改为如下:

css
#target{
width: 150px;
height: 40px;
border:1px purple solid;
}
#target:after{
content: "";
display: inline-block;
height: 100%;
background-color: red;
width: 2px;
vertical-align: middle;
}
#target img{
/*让img参与的行框中的内容垂直居中*/
vertical-align: middle;
}
#target span{
vertical-align: middle;
}

html
<div id="target">
<img src="icon.png">
<span>我是维修</span>
</div>

3.方法三

#target{
width: 150px;
height: 40px;
border:1px purple solid;
position: relative;
}
#target img,#target span{
position: absolute;
top:50%;
transform: translateY(-50%);
}
#target img{
left: 0px;
}
#target span{
left:40px;
}

效果展示

代码解释
position的top:50%;left:50%;是相对于界面宽高的。translate的-50%,-50%是相对于div本身宽高的。相当于先将div左上角居中，再将div中心点居中。