之前的理解(错误理解):
line-height可以实现内联元素的垂直居中效果,所以给span一个与高度相等的行高值,这样图片和文字的“高度”就相等了,文字也自然垂直居中了。
但是这个理解是错误的,这其中其实隐藏了很深的原理:
原理:一个display: inline-block元素,如果里面没有内联元素,或者overflow不是visible,则该元素的基线就是其margin的底边缘;否则其基线就是元素里面最后一行内联元素的基线。
解析:所以说,上述图片中的“禁止图标”垂直方向的对齐基线是图标的下边缘,也就是棕色框的下边缘;而旁边相邻的文字text垂直方向的对齐基线是文本自身的baseline
所以正确的理解应该如下:
所以要利用之前的认知——“line-height”可使文字垂直居中,就必须先将图标和文字的对齐基线调整到一致。
较好的解决方法是:给图标元素一个文字内容,使其不再是“空标记”,这个时候它的对齐基线就变成了内部文字的基线,此时就与text文本为同一基线。而我们常常采用::before等伪元素生成一个空格字符。
这个时候,图标和文字的对齐才如文章开头第一个图中表现的那样。
正确的写法如下:
<style>
.box {
line-height: 20px;
}
.icon {
width: 20px;
height: 20px;
display: inline-block;
/* 完整代码应加上以下三句,以保证在图标内部还是后面加文字都不影响视觉效果(隐藏掉)
比如:<span class="icon">搜索</span>
white-space: nowrap;
letter-spacing: -1em;
text-indent: -999em;
*/
background: url(C:/Users/Administrator/Desktop/search.png) no-repeat;
}
.icon::before { /* 划重点!! */
content: "xx"; /* 此处为了后文解释方便用的xx,正常应写为 \3000 */
color: red; /* 加上颜色也是为了与后文文字中的x区别开来 */
}
</style>
<body>
<div class="box"><span class="icon"></span>x搜索x</div>
</body>
具体图解如下:
此时,图标高度和文字行高一致,对其基线一致,那么无论字体变得多大,都丝毫不影响两者的完美对齐。动态图可见下图: