vertical-align 属性设置元素的垂直对齐方式。

该属性定义CSS行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。

第二种用法,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素a和b,a和b都是div,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:

CSS属性 让元素在一条直线上

如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:

CSS属性 让元素在一条直线上

vertical-align属性值

baseline: 将支持valign特性的对象的内容与基线对齐

sub:垂直对齐文本的下标

super:垂直对齐文本的上标

top:将支持valign特性的对象的内容与对象顶端对齐

text-top:将支持valign特性的对象的文本与对象顶端对齐

middle:将支持valign特性的对象的内容与对象中部对齐

bottom:将支持valign特性的对象的文本与对象底端对齐

text-bottom:将支持valign特性的对象的文本与对象顶端对齐