vertical-align你为什么不生效
用vertical-align:middle。然而用的时候总是无效。所以决定看一看自己到底错在了哪里。
作用环境：父元素设置line-height。
作用对象：子元素中的inline-block和inline元素。
一、父元素设置 line-height
- 父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。
- vertical-align不可继承，必须对子元素单独设置。
在父元素定义了line-height的条件下，vertical-align的作用是让（inline/inline-block）子元素依据父元素的基点对齐。
| 值 | 描述 |
| 长度 | 通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline' |
| 百分值 – % | 通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline' |
| baseline | 默认。元素的基线与父元素的基线对齐。 |
| sub | 降低元素的基线到父元素合适的下标位置。 |
| super | 升高元素的基线到父元素合适的上标位置。 |
| top | 把对齐的子元素的顶端与line box顶端对齐。 |
| text-top | 把元素的顶端与父元素内容区域的顶端对齐。 |
| middle | 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。 |
| bottom | 把对齐的子元素的底端与line box底端对齐。 |
| text-bottom | 把元素的底端与父元素内容区域的底端对齐。 |
| inherit | 采用父元素相关属性的相同的指定值。 |
关于作用环境
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。
所谓inline-block水平的元素，即可以与inline水平元素混排，又能设置高宽属性的元素，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
对inline元素设置vertical-align是有作用的，只是要重新设置line-height的值，否则继承了父元素的line-height只能垂直居中。
二、当父元素没有设置line-height时，inline/inline-block子元素之间对齐。
- 当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，无法子元素居中对齐父元素。
- 设置了vertical-align:middle的子元素的中线与兄弟元素的基线对齐。若兄弟元素都设置该项，则居中对齐。
只设文字的vertical-align，则文字的中线对齐图片底线
只设图片的vertical-align，则图片的中线与文字的基线对齐
两个的vertical-align都为middle，则两个的中线互相对齐
