开发中遇见图片跟文字放在一行显示是最常见不过的了，两个行内元素的对齐通常也是最令人头疼，有时候明明使用了最常用的对齐方法，却总还是有些许偏差，先来看一个最基本的示例：
html部分：
@@##@@ xx测试对齐Style-
推荐教程：CSS入门教程
css部分：
.wrap { width: 300px; text-align: center; margin: 20px auto; font-size: 14px; } .wrap img { width: 20px; }
未使用对齐方式的效果如下：
立即学习“前端免费学习笔记（深入）”；
默认的对齐方式是 baseline ，也就是x字母的最下面那条线。
这也就回答了第一个问题，浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准，也就是 vertical-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布局
display: flex;align-items: center;
不过就算是flex布局，有时候也会出现一点儿偏差，比如：图片尺寸为偶数、字体font-size为偶数，line-height为偶数时对齐；奇数时偏上1px。
4、使用ex单位
ex就是小写字母x的高度，可以用在不受字体和字号影响的内联元素的垂直居中对齐效果。
PS：不过这种适用于图标高度跟文字一致，比如字符后面加一个箭头（点击展开）的情况，就很实用。
.wrap img { height: 1ex;}
5、vertical-align 数值方式的使用
vertical-align 属性值可以使用数值型和百分比值，如，还是上面的基本案列：如果图片高度是20px，文字font-size为22px时，默认对齐是文字的基线，那么图片会偏上2px，这时只需要将图片向下偏移2px，就能实现对齐效果，而且 vertical-align 这个属性的数值型具有很好的兼容性。
.wrap { width: 100%; padding-top: 200px; text-align: center; margin: 20px auto; font-size: 22px; height: 40px; } .wrap img { width: 20px; vertical-align: -2px; }
相关视频教程推荐：css视频教程
以上就是css实现文本图标对齐的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1615028.html
微信扫一扫 
支付宝扫一扫 
