我们经常会遇到图标和文字不能对齐的情况。

垂直居中
.icon{
width:18px;
height:20px;
}
.text{
font-size:12px;
}
出来的结果:
下面有3中方法可以解决这个问题:
1、浮动法,将文字和图片所在的块全部浮动。给文字加line-height
![]()
垂直居中
.box {
/* border: 1px solid #000; */
overflow: hidden;
}
.icon {
float: left;
width: 20px;
height: 20px;
}
.text {
float: left;
padding: 0 5px 0 5px;
font-size: 14px;
line-height: 20px;
}
2、绝对定位法
![]()
垂直居中
.box {
position: relative;
}
.icon {
width: 20px;
height: 20px;
}
.text {
position: absolute;
font-size: 14px;
line-height: 20px;
}
3、vertical-align法(不建议使用有bug,文字的大小必须小于icon的高)
![]()
垂直居中
.box {
border: 1px solid #000;
}
.icon {
width: 20px;
height: 20px;
vertical-align: middle;
}
.text {
font-size: 13px;
}
4、将图片设置成文字的背景。
待补充…