一、flex对齐
flex的对齐比较简单，直接使用属性align-items:center就可以对齐了。
1、二个元素大小一致对齐
2、二个元素大小不一致对齐
3、文字行高不一致
二、行内元素对齐
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式
相对父元素的值
这些值使元素相对其父元素垂直对齐：
-
使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分可替换元素的基线，如
<textarea>，这意味着这些元素使用此值的表现因浏览器而异。 -
使元素的基线与父元素的下标基线对齐。
-
使元素的基线与父元素的上标基线对齐。
-
使元素的顶部与父元素的字体顶部对齐。
-
使元素的底部与父元素的字体底部对齐。
-
使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐。
-
使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
-
使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是
line-height属性的百分比。可以是负数。
相对行的值
下列值使元素相对整行垂直对齐：
1、大小行高一致对齐
2、大小行高不一致对齐
三、对齐场景示例
文字的前面或者后面有一个标签，文字可以换行
父级display: inline-block;文字增加vertical-align属性
父级display: inline-block;标签增加vertical-align属性
为什么border没有切合下面，因为有行高
标签的行高等于字号
标签里面的字号和外侧文字的字号和行高不一致
行高是由基线（baseline）到基线之间的距离来度量的，基线是字母 x 的底部。行高由上升部分（字母的上部分）、下降部分（字母的下部分）以及字体本身的高度组成
左右flex布局需要左侧的图标和右侧第一行的文字对齐
<div class="parent2">
<div class="img-warp">
<img src="@/assets/star2.png" >
</div>
<div>
<div>这个是文字文字文字</div>
<div style="height: 200px;background-color: rgb(215, 170, 170);"> </div>
</div>
</div>
.parent2{
display: flex;
font-size: 16px;
line-height: 24px;
font-weight: bold;
text-decoration: underline overline;
}
.img-warp{
height: 24px;
display: flex;
align-items: center;
}
img{
flex-shrink: 0;
width: 16px;
height: 16px;
}
安卓手机里面 line-height文字没有居中
导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性（即HHead Ascent、HHead Descent等），而primyfont的查找是看
font-family里哪个字体在fonts.xml里第一个匹配上，而原生Android下中文字体是没有family name的，导致匹配上的始终不是中文字体，所以解决这个问题就要在font-family里显式申明中文，或者通过什么方法保证所有字符都fallback到中文字体。
1.针对Android 7.0+设备：上设置 lang 属性：，同时font-family不指定英文。
比较常用的是设置font-family: sans-serif。
这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展示。blink早期的内核在fallback机制上存在问题，Android 7.0+才能ok，早期的内核下会导致英文fallback到Noto Sans Myanmar，这个字体非常丑。
2.针对MIUI 8.0+设备：设置font-family: miui。
这个方案就是显式申明中文的方案，MIUI在8.0+上内置了小米兰亭，同时在fonts.xml里给这个字体指定了family name：miui，所以我们可以直接设置。
测试上述方案是否可行（给标签增加font-family）
电脑上：
小米手机上：
结论：在小米手机上设置font-family: miui起作用了
总结【给设计建议】
- 可以使用flex布局的尽量使用flex布局；
- 如果要行内对齐，标签的字体字号和行高需要和外侧文字的字体和行高一致，才可对齐。
