vartical-align实用技巧总结

vartical-align的用法非常复杂，但是非常强大，下面介绍一些实用技巧。
首先W3C官方对vartical-align属性的定义有四个方面：
（1）vartical-align属性用于定义“周围的文字、inline元素、以及inline-block元素”相对于该元素基线的垂直对齐方式。这里的该元素指的就是被定义了
vertical-align属性的元素。
（2）在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式。td元素是table-cell 元素，也就是说vertical-align属性对table-cell类型的元素有效。
（3）vertical-align属性对于inline元素、inline-block元素和table-cell元素有效，对块元素无效。
（4）vertical-align属性允许指定负长度值（如 "vertical-align:-2px"表示的是元素相对于基线向下偏移2px）

补充：基线类似于英文簿中四条线中的倒数第二条线。（上到下四条线依次是：顶线、中线、基线和底线）。

1.vertical-align属性的取值有三种情况：负值、百分比和关键字。
（1）负值
如 "vertical-align:-2px"表示的是元素相对于基线向下偏移2px。此方法常用于解决单选框或复选框与文字垂直对齐问题。
（2）百分比
vertical-align属性取值可以为百分比，这个百分比是相对于当前元素所继承的line-height属性值决定的。
例：vertical-align: 50%; ，假如当前元素所继承的line-height为20px，
则"vertical-align: 50%“等价于"vertical-align:10px;”，其中，“vertical-align: 10px;”
表示元素相对于基线向上偏移10px。
（3）关键字

• top （顶部对齐）
• middle （中部对齐）
• baseline（基线对齐）
• bottom（底部对齐）

还有其余属性值可取，但在实际开发中很少使用。常用的就是这四种。

注意：
vartical-align属性用于定义“周围的文字、inline元素、以及inline-block元素”相对于该元素基线的垂直对齐方式。这里的该元素指的就是被定义了
vertical-align属性的元素。（可以理解为改变的是其余元素的对齐方式）

2.vartical-align属性的应用
vertical-align属性对inline元素、inline-block元素和table-cell元素有效，对于块元素无效。
（1）inline元素和inline-block元素
在HTML中，常见的inline-block元素有两个：img元素和input元素。这两个
inline-block元素很重要，一定要记住。
（2）块元素
vertical-align属性对于块元素无效。
例如想在div块元素中实现图片的垂直居中，我们可以先为div定义
“display:table-cell”,（！！注意"display:inline-block"不可以，因为对于inline元素、inline-block元素而言，"vertical-align"属性设置的是其余元素相对于自己的位置。而对于"table-cell"元素，"vertical-align"属性设置的是单元格中内容的对齐方式。也可以理解为将div元素整体作为一个单元格，设置的是内容在单元格中的位置！！！一定注意！！）也就是将块元素转化为table-cell元素（表格单元格），然后在使用"vertical-align:middle"就可以实现了。
（3）table-cell元素
W3C中定义，在表格单元中，vertical-align属性可以定义单元格中内容的对齐方式。

总结：
1.inline元素和inline-bliock元素的vertical-align属性针对的是周围的元素来说的，vertical-align定义的是周围元素相对于当前元素的对齐方式。
2.table-cell元素的vertical-align属性针对的是自身而言的。vertical-align属性定义的是内部子元素相对于自身的对齐方式。