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

最新推荐文章于 2024-10-08 16:25:06 发布

原创最新推荐文章于 2024-10-08 16:25:06 发布 · 769 阅读

4 ·

CC 4.0 BY-SA版权

前端学习笔记同时被 2 个专栏收录

16 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

文章纠正了关于使用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>

具体图解如下：