开发中遇见图片跟文字放在一行显示是最常见 不过 的了，两个 行内元素 的对齐通常也是最令人头疼，有时候明明使用了最常用的对齐方法，却总还是有些许偏差，先来看一个最基本的示例：
ht ML 部分：
<div class="wrap">
< img src="https://avatars3.g IT h ub usercontent .COM /u/16339041?s=60& am p; v=4" alt="">
xx测试对齐Style-
</div>
css部分：
.wrap {
width: 300px;
text-align: center ;
m arg in: 20px auto;
font- Size: 14px;
}
.wrap img {
width: 20px;
}
未使用对齐方式的效果如下：
默认的对齐方式是 baseline ，也就是x字母的最下面那条线。
这也就回答了第一个问题，浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准，也就是 vert ical -align:baseline; 。
常见的 几种 居中 方案
1、使用 vertical-align 居中对齐 方式
.wrap {
vertical-align: middle;
}
.wrap img {
vertical-align: middle;
}
当我们使用常用的 vertical-align 对齐文本和图片时，其实也是有一定的偏差的，如下图：
vertical-align 的middle值实际上是相对于小写字母x的一 半 高度来说的，所以图片会跟x的中间 开始 对齐，但是其他字符譬如S、中文，就会发现无论如何都会出现稍许偏差，图片会相对而言偏下。
2、使用 vertical-align 同时使用span包裹文本
让我们再稍做 改变 ，将文本部分使用 span标签 包裹，并且对span使用 vertical-align: middle; 样式对齐。会发现此时图片会上移少许。效果如下：
3、使用flex布局
dis play : flex; align -i tems: center;
不过就算是flex布局，有时候也会出现 一点 儿偏差，比如： 图片尺寸 为偶数、字体font -s ize为偶数，line-h ei ght为偶数时对齐； 奇数 时偏上1px。
具体参考可查看 iconSize 、 fontSize 和 lineHeight 之间奇偶关系 对齐误差
4、使用ex单位
这种方式是从张鑫旭老师的《css世界》中看到的，ex就是小写字母x的高度，可以用在不受字体和 字号 影响的内联元素的垂直居中对齐效果，PS：不过这种适用于图标高度跟文字一致，比如字符后面加一个箭头（点击展开）的情况，就很实用。
.wrap img {
height: 1ex;
}
5、vertical-align 数值方式的使用
同样也是在张鑫旭老师的《css世界》中看到的， vertical-align 属性值可以使用数值型和百分比值，
如，还是上面的基本案列：如果图片高度是20px，文字font-size为22p
x时，默认对齐是文字的基线，那么图片会偏上2px，这时只需要将图片向下偏移2px，就能实现对齐效果，而且 vertical-align 这个属性的数值型具有很好的兼容性。
.wrap {
width: 100%;
padding -t op: 200px;
text-align: center;
mar gin : 20px auto;
font-size: 22px;
height: 40px;
}
.wrap img {
width: 20px;
vertical-align: -2px;
}
到此这篇关于css记录文本图标对齐的几种解决方案的 文章 就介绍到这了,更多相关css文本图标对齐内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 css记录文本图标对齐的几种解决方案 全部内容，希望文章能够帮你解决 css记录文本图标对齐的几种解决方案 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css记录文本图标对齐的几种解决方案的详细内容...