css图片和文字的行居中

文字如果和图片在一行里，往往会出现图片比文字要高，即不在一行里。写法通常有如下两种：

<div class="box">
    <img src="https://xxx.com/xxx.jpg" class="head_image"/>
    <span>测试文本在此</span>
</div>
<div class="box">
    <img src="https://xxx.com/xxx.jpg" class="head_image"/>
    测试文本在此
</div>

解决这个问题两种办法。

一种是使用行高加垂直居中，即：

.head_image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid white;
}
.box * {
    font-size: 28px;
    vertical-align: middle;
    line-height: 1.75em;
}

另一种是使用inline-flex，即：

.box {
    font-size: 28px;
    display: inline-flex;
    align-items: center;
}