vertical-align: middle相关

1，作用范围

    vertical-align用于对齐行内元素。

    常见行内元素有line line-block

 2,作用原理

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

    注意一点，这里是相对于所在行的基线对齐，这个所在行的具体高度不受父级高度控制，只由所在行最高的元素决定或者父级设置行高，  

    因此，很多情况下会发现不起作用了，各种疑惑，具体表现如下图

 

 

 

 

3，使用条件

     a,，子元素是内联元素

     b，子元素不止一个（若是只有一个，那么只需要line-height改动就行了，vertical-align的作用是行内的兄弟元素对齐）

     c，父元素高度需要跟行的高度一致，比如设置line-height的高度与height的高度一致，或者使用disable：table-cell，又或者直接让父级的高度由子元素决定（撑开）

 

当行高与父级高度一致时 如图