关于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_第1张图片
如图所示

现在我要让class="box"的div在class="wrapper"的div里面垂直居中,我可以在class="wrapper"的div里面加一个div空标签,把它的高度设为100%,宽度设置为0,再给它一个vertical-align:middle样式,同样的给class="box"的div一个vertical-align:middle样式,那么box就可以在div里面垂直居中了。




    
    CSS垂直居中
    


关于vertical-align_第2张图片
居中了

vertica-align和line-height的关系

  • vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height计算的

你可能感兴趣的:(关于vertical-align)