[CSS碎片知识] 深入理解 vertical-align
参考文章
- 我对CSS vertical-align的一些理解与认识（一）
- CSS vertical-align的深入理解(二)之text-top篇
- CSS深入理解vertical-align和line-height的基友关系
1. vertical-align 作用是啥?
正如字面意思: 垂直居中
2. vertical-align 有多少属性,默认是什么?
| 值 | 描述 |
|---|---|
| 长度 | 通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline' |
| 百分值 – % | 通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline' |
| baseline | 默认。元素的基线与父元素的基线对齐。 |
| sub | 降低元素的基线到父元素合适的下标位置。 |
| super | 升高元素的基线到父元素合适的上标位置。 |
| top | 把对齐的子元素的顶端与line box顶端对齐。 |
| text-top | 把元素的顶端与父元素内容区域的顶端对齐。 |
| middle | 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。 |
| bottom | 把对齐的子元素的底端与line box底端对齐。 |
| text-bottom | 把元素的底端与父元素内容区域的底端对齐。 |
| inherit | 采用父元素相关属性的相同的指定值。 |
3. 为什么我的vertical-align属性不起作用
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。所以，类似下面的代码就不会起作用：
span{vertical-align:middle;}div{vertical-align:middle;}
默认情况下, 什么标签可以使用 vertical-align 例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
在线DEMO: vertical-align属性测试面板页面
4. vertical-align默认的对齐方式是？
vrtical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘（参见“字母’x’在CSS世界中的角色和故事”一文）。所以，妹子图片的下边缘就和后面zxx中的字母x下边缘对齐（见下图）。而字符zxx本身是有高度的，对吧，于是，图片下面就留空了。
5. vertical-align和 line-height 之间 是 好基友关系
bootstrap 中 , <input class=“form-control” /> 后面 和一个 button 放在一起, 就会发现, 会出现不对齐的方式, button 会往下偏一点.
类似下图, 会偏差一点
解决方案: 让vertical-align失效
img { display: block; }
例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。