vertical-align详解

Posted 浣熊sky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的中间位置,如下图:

 
 
 

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

 

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


以上是关于vertical-align详解的主要内容,如果未能解决你的问题,请参考以下文章

怎么理解CSS中vertical-align这个属性

vertical-align属性

vertical-align作用的前提++图片不上下居中

vertical-align

vertical-align的深入学习

深入理解vertical-align