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

1、web前端入门到实战：文本图标对齐的几种解决方案频繁的对齐问题：扫瞄器是基于什么对齐图标和文本的？为什么明明用法了 flex或vertical-align，图标还是看起来差了 1 像素没对齐？文字图标布局开发中遇见跟文字放在一行显示是最常见不过的了，两个行内元素的对齐通常也是最令人头疼，有时候明明用法了最常用的对齐办法，却总还是有些许偏差，先来看一个最基本的示例：html部分：xx测试对齐style-css部分：.wrap width: 300px;text-align: center;margin: 20px auto;font-size: 14px;.wrap img width: 20p

2、x;未用法对齐方式的效果如下：默认的对齐方式是baseline，也就是x字母的最下面那条线。这也就回答了第一个问题，扫瞄器的跟文字未额外设置时是基于小写字母x的下边缘为基准，也就是vertical-align:baseline;。怎么让跟文字居中对齐呢，下面来看几种频繁的解决计划。频繁的几种居中计划1、用法vertical-align 居中对齐方式.wrap vertical-align: middle;.wrap img vertical-align: middle;当我们用法常用的vertical-align对齐文本和时，其实也是有一定的偏差的，如下图：vertical-align的mid

3、dle值事实上是相对于小写字母x的一半高度来说的，所以会跟x的中间开头对齐，但是其他字符譬如s、中文，就会发觉无论如何都会浮现稍许偏差，会相对而言偏下。2、用法vertical-align 同时用法span小包文本让我们再稍做转变，将文本部分用法span标签小包，并且对span用法vertical-align: middle;样式对齐。会发觉此时会上移少许。 效果如下：其实严格来说，第一种方式不算是真正的彻低发挥了vertical-align的作用，我经常按第一种方式来实现对齐效果，由于懒得再写一层span标签，但事实上我们可以再尝试把vertical-align: middle;去掉，会发觉

4、跟只在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单位这种方式是从张鑫旭教师

5、的css世界中看到的，ex就是小写字母x的高度，可以用在不受字体和字号影响的内联元素的垂直居中对齐效果，ps：不过这种适用于图标高度跟文字全都，比如字符后面加一个箭头（点击绽开）的状况，就很有用。.wrap img height: 1ex;5、vertical-align 数值方式的用法如，还是上面的基本案列：假片高度是20px，文字font-size为22px时，默认对齐是文字的基线，那么会偏上2px，这时只需要将向下偏移2px，就能实现对齐效果，而且vertical-align这个属性的数值型具有很好的兼容性。.wrap width: 100%;padding-top: 200px;text-align: center;margin: 20px auto;font