css利用不可见文本实现图标与文字对齐

发表于 | 分类于
字数统计: 275 字 | 阅读时长 ≈ 1 分钟

日常开发中经常需要将icon图标与文字对齐，看起来好像很简单，但实现以后切换不同屏幕或者字体大小或行高，肉眼看总是觉得好像有一些没有完全对齐。

利用不可见文本实现图标与文字对齐

使用inline-flex：

1
2
3
4
<div>
    <span>&#8203;<img src="url"/></span>
    文字内容
</div>
1
2
3
4
span{
    display: inline-flex; 
    align-items: center；
}

使用inline-block:

html结构同上

1
2
3
4
5
6
7
8
9
10
11
12
span { 
    position: relative; 
    display: inline-block; 
    line-height: 1; // 使文本高度为图标高度 
    width: 1em; //图标大小，用来占位 } 
span img { 
    position: absolute; 
    top: 0;
    left: 0;
    width: 1em; 
    height: 1em; 
}

伪元素替换html中的不可见文本

1
2
3
4
5
6
<div>
    <span>
        <img src="url"/>
    </span>
    文字内容
</div>
1
2
// 加上伪元素
span::before { content: '\200b' }

原理： 让不可见文本对齐Line Box中其他文本，让图标对齐这个不可见文本。

详细原理分析请查阅大漠《Icon和文本对齐方式的探索》：http://www.w3cplus.com/css/icon-align-to-text.html

------ 本文结束------
0%