vertical-align详解

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

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

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

 
 
 
vertical-align详解

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

 
vertical-align详解

参考:https://www.jianshu.com/p/dea069fecb62


vertical-align详解

上一篇:文件句柄资源


下一篇:关于块级元素和行内元素的总结(面试常考)