css之vertical-align

一、vertical-align的属性

1.线类：baseline,top,middle,bottom 。2.文本类 :text-top,text-bottom。 3.上标下标类:sub,super 。 4.数值百分比类:20px,2em,20%

二、数值和百分比的差异

数值百分比类 分为数值类和百分比类，但是两种有很多共性1.都带数字。2.都支持负值(css里支持负值的并不多margin,letter-spacing,word-spacing,vertical-align)。3.行为表现一致

vertical-align默认是是baseline对齐，数值例如1px就是在baseline的基础上向上偏移1px，百分比值是相对于行高计算的 ，最后值为百分数乘以行高，但是这个IE6/IE7下vertical-align不支持小数line-height

三、vertical-align起作用的前提

(Applies to inline-level and table-cell element)

适用于

1.inline水平

inline:<span>,<strong>,<em>,未知元素,...

inline-block:<img>,<input>(IE8+),<button>(IE8+),...

2.table-cell元素

table-cell:<td>【table-cell的vertical-align只对自身起作用】

默认状态下支持vertical-align的图片/按钮/文字和单元格。

1.display可以更改元素的显示水平

2.css声明可以更改元素的显示水平

四、vertical-align与line-height

{line-height：30px;vertical-align:10%}即{line-height:30px;vertical-align:3px}

相互影响导致近似垂直