关于vertical-align:middle的理解

一开始接触到vertical-align这一属性感觉理解的还不够透彻，于是又看了一些博客，总结一下，加深记忆。
首先是下面的这个例子，需要图片和两段文字居中对齐。

相应的HTML部分

    

    
    CSS层叠样式表
    (Cascading Style Sheets)
   

相应的CSS部分

div.outer{
    width:1024px;
    height: 200px;
    background-color:#eeeeee;
    border: 1px solid black;
}
div.inner{
    line-height: 200px;
    text-align: center;
}
img{

}
.text1{
    font-size: 2em;
}
.text2 {
    text-decoration: underline;
    color: red;
}

为了体现的更加直观，我们将每个字段加上字母“x”.
我们先为text2加上vertical-align:middle

我们看到text2里的文字向下移动了一部分。因为该属性的作用是将元素盒子的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐，从上图我们看到基线是图片的下边沿，text2所以向下移动了半个x.

我们再将text1里加入vertical-align:middle属性。

与上边的情况类似，我们看到CSS样式层叠表x这句话也相对于基线移动了半个x的距离。但是图片还是没有对齐，因此，我们最后对图片也应用vertical-align:middle这一属性。
如下图所示:

与之前的图相比较我们看到图片的位置相对于基线也移动了半个x的距离，我们可以得出结论，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。即是图片、span元素的基线和div的基线对齐。

通过上边的例子，我们可以总结出:
1.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
2.vertical-align:middle是将元素盒子的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐。(注意字母x的关键作用)