“这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战”
在开发过程中经常会遇到图标和文字对齐的需求，两个行内元素对齐是最常见的效果，但也是最不好处理的。因为图标和文字总是存在这样或者那样的偏差，不信你看下面的效果！
默认效果我们肉眼可见图标有点往上，没有和文字对齐。代码也很简单：
<head>
<style>
.box {
display: inline-block;
padding: 10px;
border-radius: 25px;
background: pink;
}
</style>
</head>
<body>
<div class="wrap" >
<div class="box">
<img width="15" height="15" src="http://baikebcs.bdimg.com/baike-icon.png" alt="">
文字文字
</div>
</div>
</body>
常见的几种居中方案
首先我们最容易想到的是 vertical-align 的方式，尝试这个属性实现居中对齐：
.img {
vertical-align: middle;
}
具体的效果如下：
我们肉眼可见图标有点往下，没有和文字对齐。单独给图片设置是不太好使的，我们可以使用 vertical-align 同时使用 span 包裹文本，然后给文本也设置对齐看看。
<head>
<style>
.box {
display: inline-block;
padding: 10px;
border-radius: 25px;
background: pink;
}
.img {
vertical-align: middle;
}
.title {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap" >
<div class="box">
<img class="img" width="15" height="15" src="http://baikebcs.bdimg.com/baike-icon.png" alt="">
<span class="title">文字文字</span>
</div>
</div>
</body>
这下终于好了，其实使用 flex 布局也可以实现对齐。
.box {
display: inline-block;
padding: 0 10px;
height: 28px;
line-height: 28px;
border-radius: 25px;
background: pink;
display: inline-flex;
align-items: center;
}
其实今天的重点不是要讲这个，而是想要告诉大家 vertical-align 属性值可以使用数值型和百分比值，默认对齐是文字的基线，那么图片会偏上 2px，这时只需要将图片向下偏移 2px，就能实现对齐效果，而且 vertical-align 这个属性的数值型具有很好的兼容性。
<head>
<style>
.box {
display: inline-block;
padding: 10px;
border-radius: 25px;
background: pink;
}
.img {
vertical-align: -2px;
}
</style>
</head>
<body>
<div class="wrap" >
<div class="box">
<img class="img" width="15" height="15" src="http://baikebcs.bdimg.com/baike-icon.png" alt="">
文字文字
</div>
</div>
</body>
不要使用 span 包裹文本，只需给图片设置 vertical-align: -2px; 就可以实现对齐啦！简直不要太爽了。
其实把图片换成字体图标通过 line-height 也可以实现对齐，但是图标都是单色的，而图片可以提供更丰富的颜色内容。
文字偏上如何解决
假如设计稿高度为 28px，我们如果把行高写成 28px，那么在 IOS 和安卓下，必然是会出 bug 的，相信实践过的朋友都知道，同样的行高，IOS 下没什么问题，但是在安卓下，文字是偏上的，如图所示：
怎么解决呢，根据网上的经验，都是建议使用 flex 布局的 align-items 来布局，但是这种布局在小程序还是无法实现对齐，所以不行。
给父元素设置 display: inline-table，然后给子元素设置 display: table-cell 和 vertical-align middle 就可以了。
<div class="word"><span>文字文字文字文字文字文字</span></div>
.word {
font-size: 10px;
background: red;
color: white;
display: inline-table;
padding: 0 10px;
table-layout: fixed;
width: 100px;
}
.word span {
display: table-cell;
height: 22px;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
我们都知道，安卓下的文字是偏上的，所以我就把 line-height 加高了几个像素，奇迹发生了，安卓下居中了，IOS 基本没变，绝了！经过试验，line-height 值需要比 height 值大 2px 即可，IOS 对这个值的敏感度非常小，只要不大于这个值，就几乎不变。
