如何正确使用css中vertical-align

首先明确，vertical-align只对inline-block和inline元素有效。

在说vertical-align之前，需要先说明一下什么是line box。

浏览器中显示的一行会包含多个非block元素（有block元素时就换行了），通过一个box可以把这一行包含起来，这就是一个line box。

比如一个div，他会占据一行，包裹着内部所有非block元素的就是一个line box。

line box的高度，是本行中拥有最高行高的元素的高度。

此时，对拥有最高行高的非block元素设置vertical-align值，会直接影响本行的基线位置（可以说就是设置了本行的基线位置），本行中其他非block元素设置vertical-align时，都是相对于本行的基线位置进行显示。

 

举例：

<div style="height:100px;width:100px;border:1px solid black;">
    <span style="display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span>
    <span style="vertical-align:top;">2</span>
    <span style="vertical-align:middle;">3</span>
    <span style="vertical-align:bottom;">4</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
    <span style="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span>
    <span style="vertical-align:top;">2</span>
    <span style="vertical-align:middle;">3</span>
    <span style="vertical-align:bottom;">4</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
    <span style="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span>
    <span style="vertical-align:top;">2</span>
    <span style="vertical-align:middle;">3</span>
    <span style="vertical-align:bottom;">4</span>
</div>

会发现显示如下图所示。

1所在的span高度最高，所以其设置的vertical-align会直接影响本行的基线位置。调整1所在的span出现的先后顺序，结果都是一样的。

 

<div style="height:100px;width:100px;border:1px solid black;">
    <span style="vertical-align:top;">2</span>
    <span style="vertical-align:middle;">3</span>
    <span style="vertical-align:bottom;">4</span>
    <span style="display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">

    <span style="vertical-align:top;">2</span>
    <span style="vertical-align:middle;">3</span>
    <span style="vertical-align:bottom;">4</span>
    <span style="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
    <span style="vertical-align:top;">2</span>
    <span style="vertical-align:middle;">3</span>
    <span style="vertical-align:bottom;">4</span>
    <span style="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span>
</div>

 

再举例：

在一个block元素中使用

#parent::before或者#parent::after

{

　　content:'';

　　display:inline-block;

　　height:100%;

　　vertical-align:middle;

}

可使#parent中的非block元素垂直居中显示，也是上述的原理。

 

ps:

如果想让1在span中垂直居中显示，保证span的display是inline-block，然后将span的line-height设置为50px，同span高度相等即可。不可设置为100%，最后的line-height只是文字大小的高度。