1、应有前提，display是：
(1 inline水平
<img><span><strong><em>等 ， inline-block中的<input><button>等
(2 ‘table-cell’元素 （单元格属性）
2、display可以更改元素的显示水平：
（1 直接把vertical-align:middle设置在属性中
3、CSS声明也可以间接更改display水平
（1 元素如果用了浮动（float）就会变成block水平了，就不在一个inline里面了
（2 元素如果用了绝对定位（position:absolute）也会变成block
4、遇到图片外面下基线存在空白，可以拆分line-height和vertical-align的关系。
比如： line-height:0; vertical-align:top;
5、（vertical-align线性类属性值中的top\bottom\middle）
(1)一般我们的垂直居中都是近似，原因是元素垂直中心点和父级基线上1/2x-height对齐，要想完全居中，可以设置：
font-size:0
(2)不过table-cell中的比较简单，设置垂直居中即可
6、（vertical-align的文本类属性值：text-top text-bottom）
盒子的顶部（底部）和父级的content area的顶部（底部）对齐
不受行高line-height和其他內联元素影响，
适用场景：图文混排等
7、（vertical-align的上标和下标）
对应：vertical-align:super 提高盒子的基线到父级合适的上标基线位置
vertical-align:sub 降低盒子的基线到父级合适的下标基线位置
例如：
XX书<sup> [1]</sup> NH<sub>3</sub>HCO<sub>4</sub>
8、总结解决问题经验：
（1）5中我们设置font-size:0并不是万全之策，如果图片后面也要跟文字，那就同样设置vertical-align:middle
(2)小图标和文字的对齐：针对兼容性问题和效果有时候不明显，可以通过设置vertical-align负值
（3）不定尺寸图片或者多行文字的垂直居中：
［主体元素inline-block;辅助元素设置宽度为0且高度100%;主体和辅助元素都设置为vertical-align:middle］
例如：<p style='height:100px;'><img src='1.jpg'><i></i></p> [其中img是主体元素，i是额外添加的辅助元素]
我们可以这样设置样式：
img{vertical-align:middle}
i{display:inline-block;height:100%;vertical-align:middle}
网友评论