一开始接触到vertical-align这一属性感觉理解的还不够透彻，于是又看了一些博客，总结一下，加深记忆。 首先是下面的这个例子，需要图片和两段文字居中对齐。 相应的HTML部分
<div class="outer"> <div class="inner"> <img src="http://climg.mukewang.com/59c21bae000157fa01000059.jpg"> <span class="text1">CSS层叠样式表</span> <span class="text2">(Cascading Style Sheets)</span> </div> </div>相应的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的关键作用)
