正确姿势的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">

  

      </code><code>404</code><code>页面

      

  

  

      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正如我上一篇文章所说的是为了消除代码换行所造成的空隙。

你可能感兴趣的:(正确姿势的verticle-align)