理解vetical-align属性

译文原文：understand vetical-align
作者：gavin kistner
译文：

      在很多聊天室中我帮助解决的疑难问题是：我要如何在一块区域中居中显示我要显示的内容？这个问题紧接着的陈述就是：我使用vertical-align:middle 但是它好像不起作用！"
      这个涉及到三方面的问题：

      A:传统的html布局不是旨在解决垂直方向上的行为.本质上,html布局在水平方向上缩放，内容基于当前的宽度得到适当的高度。传统上，水平尺寸控制和布局是比较容易的；垂直方向上的尺寸控制和布局比水平方向难。

     B:vertical-align:middle没有起像期望中的那样起效是因为使用的人没有理解应当如何使用这个属性。
     c:在我看来因为css规范把这个属性搞复杂了，vertical-align属性被用来在不同的场景中规范两种不同的行为。

table-cell的元素中的vertical-align

       当在table的单元格中使用的时候，vertical-align实现和效果和我们所期望的一致,vertical-align模拟了valign属性的效果,在一个现代，标准化的浏览器中，以下的三段代码起到的作用相同:

      <td valign="middle"><!--but you shouldn't ever use valign--></td>
      <td style="vertical-align:middle">......</td>
      <div style="display:table-cell; vertical-align:middle">......</div>

      在你的浏览器中用合适的容器包含上面的元素会如下显示：

内联元素中的vertical-align

        当vertial-align使用在内联元素中,这完全是另一种情形。在这种情况下，它表现的和align属性作用在img元素上的效果一致.在现在标准的浏览器中，下面的代码效果一样：
       <img align="center"/>
       <img style="vertical-align:middle">
      <span style="display:inline-block;vertical-align:middle"> foo<br/>
       在你的浏览器中，显示效果如下：

其他元素中的 vertical-align

       理论上说，这个css属性对其他的元素不起作用.当初学者为一个一般的块级元素添加这个属性的时候比如一个div,大多数浏览器使这个元素的所有内联元素继承这个属性。

如何居中显示元素

    如果你阅读这些内容，你可能对你为啥出错不感兴趣。你可能希望如何使之有效。

    方法一

   接下来的例子基于两点假设.如果你符合这两点假设,这个方法就是为你准备的:
     1.你能将内容放置在一个固定高度的块级元素中。
     2.你能对这个元素应用绝对定位.
   如果你符合上面的假设,解决方式:
     1.设置父容器绝对定位或者相对定位。
     2.为子容器设置一个固定的高度.
     3.为子容器设置绝对定位和top:50%以便将他定位到父容器的中间。
     4.设置margin-top:-yy这个yy值是子容器的一半的高度。
   这个例子的代码如下：
     <style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
    </style>
    ...
   <div id="myoutercontainer">
   <div id="myinnercontainer">
   <p>Hey look! I'm vertically centered!</p>
   <p>How sweet is this?!</p>
   </div>
   </div>
在你的浏览器中.上面的例子显示效果如下：

   方法二

  这个方法需要满足下面的条件：
    1.你只有单独一行需要居中显示。
    2.你能为父元素设置一个固定的高度。
  如果你满足以上条件，解决方式如下：

    1.设置父元素的line-height为一个任意的固定高度
  这个例子的代码如下：
    <style type="text/css">
    #myoutercontainer2 { line-height:4em }
    </style>
    ...
    <p id="myoutercontainer2">
    Hey, this is vertically centered. Yay!
    </p>
   在你的浏览器中，上面的例子显示效果如下：