虽然自己水平不高，但是对于重构这方面工作一直不怎么喜欢，可能觉得比较没有新意，但是看了大神文章突然有点一棍打醒的感觉，突然觉得自己的CSS水平好烂。。。。
一、vertical-align
①、触发元素：行元素、设置有display:inline/display:inline-block的元素、表单元素(display:table-cell);
虽然vertical-align属性只会在inline-block水平的元素上期作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对 vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的，这个后面会较为深入的分析。
②、取值：
| 值 | 描述 |
|---|
| 长度 |
通过距离升高（正值）或降低（负值）元素。‘0cm‘等同于‘baseline‘ |
| 百分值 – % |
通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。‘0%‘等同于‘baseline‘ |
| baseline |
默认。元素的基线与父元素的基线对齐。 |
| sub |
降低元素的基线到父元素合适的下标位置。 |
| super |
升高元素的基线到父元素合适的上标位置。 |
| top |
把对齐的子元素的顶端与line box顶端对齐。 |
| text-top |
把元素的顶端与父元素内容区域的顶端对齐。 |
| middle |
元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。 |
| bottom |
把对齐的子元素的底端与line box底端对齐。 |
| text-bottom |
把元素的底端与父元素内容区域的底端对齐。 |
| inherit |
采用父元素相关属性的相同的指定值。 |
常用的值有：top、middle、bottm、数值、百分比；
注：数值和百分比为正值时，只会把文本下方拉伸，不会将文本往下挤；如果为负值时，会将文本往下方挤去；
百分比是相对于此标签继承的line-height值决定的。
③、vertical-align无效原因：是否满足①中的触发元素要求，对于块元素中的inline-block元素，需要使用line-height属性来让vertical-align有参照目标；
CSS部分属性的深入学习
原文：http://www.cnblogs.com/milo-wjh/p/6396953.html
