web前端入门到实战：文本图标对齐的几种解决方案

　　常见的对齐问题：

　　浏览器是基于什么对齐图标和文本的？

　　为什么明明使用了 flex或vertical-align，图标还是看起来差了 1 像素没对齐？

　　文字图标布局

　　开发中遇见图片跟文字放在一行显示是最常见不过的了，两个行内元素的对齐通常也是最令人头疼，有时候明明使用了最常用的对齐方法，却总还是有些许偏差，先来看一个最基本的示例：

　　html部分：

　　xx测试对齐Style-

　　</div>

　　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;样式对齐。会发现此时图片会上移少许。效果如下：

　　其实严格来说，第一种方式不算是真正的完全发挥了vertical-align的作用，我常常按第一种方式来实现对齐效果，因为懒得再写一层span标签，但实际上我们可以再尝试把vertical-align: middle;去掉，会发现跟只在img标签上使用vertical-align: middle;的效果是一样的，也就是说，外层的div上设置vertical-align并没有作用。

　　这是因为，vertical-align起作用是有前提条件的，只能应用于内联元素以及display值为tabale-cell的元素，且vertical-align不可继承。

　　3、使用flex布局

　　display: flex;

　　align-items: center;

　　不过就算是flex布局，有时候也会出现一点儿偏差，比如：图片尺寸为偶数、字体font-size为偶数，line-height为偶数时对齐；奇数时偏上1px。

　　4、使用ex单位

　　这种方式是从张鑫旭老师的《css世界》中看到的，ex就是小写字母x的高度，可以用在不受字体和字号影响的内联元素的垂直居中对齐效果，PS：不过这种适用于图标高度跟文字一致，比如字符后面加一个箭头（点击展开）的情况，就很实用。

　　.wrap img {

　　height: 1ex;

　　}

　　5、vertical-align 数值方式的使用

　　如，还是上面的基本案列：如果图片高度是20px，文字font-size为22px时，默认对齐是文字的基线，那么图片会偏上2px，这时只需要将图片向下偏移2px，就能实现对齐效果，而且vertical-align这个属性的数值型具有很好的兼容性。