css-vertical-align属性

2020-10-11

vertical-align应该是我目前遇到的最复杂的属性了。先了解基线的概念。

基线

下面是一行文本（不包括padding和margin区域），其中制定了一些线的概念。

baseline基线是一行文本中x字符的低端所在的直线。

还有，基线的位置不是固定的：

在文本内联元素中，如上图，基线是字符x的下边缘位置
在img元素中，基线就是图片的下边缘
在inline-block元素中。如果该元素中有内联元素，基线就是最后一行内联元素的基线；如果该元素没有内联元素或者内联元素的overflow不是visible，基线就是margin的底边缘。

vertical-align

vertical-align属性应用于行内元素，如display属性值为inline, inline-block, table-cell的。

第一种用法，若应用于表单元格中，如display属性为table-cell的，这个属性会设置单元格框中单元格内容的对齐方式。如果给一个表格的td加一个vertical-align: middle 的样式，表格里面的内容会垂直居中。

第二种用法，该属性定义行内元素相对于该元素所在行的垂直对齐。意思是，如果有几个行内元素a, b, c在同一行，那么这3个行内元素在垂直方向该如何对齐，它们是全部bottom对齐，全部baseline对齐还是a的middle和b,c的baseline对齐，这是由它们自己分别设置的vertical-align属性决定的。

下面以一个例子来解释。

<!DOCTYPE html>
<html>

<head>
    <body>
        <div style="width:500px; height:1000px; background:aquamarine">
            <span>
                abcxyz周华辉
            </span>
            <div style="display:inline-block; width:100px; height:100px; margin:10px; background:blue">
            </div>
            <span>
                西瓜
            </span>
        </div>
    </body>

</html>

默认所有内联元素的vertical-align值为baseline

如上图所示，所有元素的baseline对齐了。

设置第一个span的vertical-align为middle

很明显，第一个span的middle line和另外两个元素的baseline对齐了。

垂直居中的方法

若设置内层元素inner在外层元素outter中垂直居中。可以

设置outter的display为table-cell，vertical-align:middle
在outter中另外增加一个div
1
2
3
4
5
div{
width: 0px;
height: 100%;
vertical-align: middle
}
然后设置inner的vertical-align为middle。然后inner就在outter中垂直居中了。