vertical-align属性与垂直居中

     

下面来详细介绍下vertical-align这个属性以及实现垂直居中的若干方法。

1、根据W3C Spec 中对 vertical-align属性的定义：

    This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

，这句话的解释就是这个vertical-align 属性应用于行内元素。

 

2、什么是line box？

    The rectangular area that contains the boxes that form a line is called a line box.，这句话解释了行内元素为线性排列的元素即行内元素。

 

 3、垂直居中是相对于垂直高度而言的，既然我们要垂直居中，我们需要了解line-box，已知height对inline元素无效，那么line box的高度是怎么计算的呢？

    The height of a line box is determined by the rules given in the section on line height calculations.

 

  一个line box的高度是的计算方式如下：

        line box中的每一个行内元素都将加入到计算过程，如果是元素inline的则取其line-height的值，如果元素是inline-block或者是inline-table则取其margin-box的高度，最后这些值的最大值，即为line box的高度了。