小图标和文字天然对齐(《CSS世界读书笔记》)

文章纠正了关于使用line-height实现内联元素垂直居中的错误理解,指出图片和文字的对齐基线不同。通过分析display: inline-block元素的基线规则,提出了解决图标和文字对齐问题的方法:通过伪元素让图标元素具有内联内容,使其对齐基线与文字一致,从而实现两者完美对齐。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前的理解(错误理解):

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>

具体图解如下:

此时,图标高度和文字行高一致,对其基线一致,那么无论字体变得多大,都丝毫不影响两者的完美对齐。动态图可见下图:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值