官方解释: 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
vertical-align 使用场景: 设置图片或者表单(行内块元素)和文字垂直对齐
语法：
vertical-align : baseline | top | middle | bottom
图片文字垂直居中效果
基线、中线、底线、顶线
<div style="background: #ccc;">
<img src="./img/6.jpg" alt="" height="200">图片Image
</div>
图片默认按基线(baseline)对齐
默认对齐方式
图片按底线对齐vertical-align: bottom;
<div style="background: #ccc;">
<img style="vertical-align: bottom;" src="./img/6.jpg" alt="" height="200">图片Image
</div>
图片按底线对齐
图片文字居中对齐
<div style="background: #ccc;">
<img style="vertical-align: middle;" src="./img/6.jpg" alt="" height="200">
图片Image
</div>
图片文字居中对齐
图片文字在盒子居中对齐
- 设置外盒子行高和高度一致
- 图片设置vertical-align
<div style="background: #ccc; height: 200px; line-height: 200px;">
<img src="./img/6.jpg" alt="" height="80px" style="vertical-align: middle;">图片Image
</div>
非行内元素使用vertical-align
对于非行内或行内块元素，使用vertical-align前应该转换为行内块元素display: inline-block;
<div style="background: #ccc;">
<div style="display: inline-block;vertical-align: middle;height: 80px; width: 80px; background: green;"></div>
文字
</div>
