正确姿势的verticle-align

  1.先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。

  2.看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了

 

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     

  "http://www.w3.org/1999/xhtml">

  

      

      

  

  

      class="wall">

         class="verticalAlign">

         "index.html">class="img404" src="images/404.jpg" />

      

  

  

值得一提的是.verticalAlign，加一个display:inline-block是为了触发它的layout，以让本来没有layout的span可以设置宽和高，margin-left:-1px是为了让span左移一个像素，而令img在水平方向上回到正中位置；另外.wall里面的font-size:0正如我上一篇文章所说的是为了消除代码换行所造成的空隙。