理解vertical-align或“如何竖向居中”<转>

在各种技术论坛里经常会有这样的问题提出，“我如何能将这个东西竖向居中？”这个问题通常会跟随着这样一句话，“我使用了

vertical-align:middle

，但是不管用！ ”

这个问题其实有三个层面的原因


观看演示

Table单元格中的vertical-align

当出现在Table单元格中时，

vertical-align

的效果会如大多数人的预期一样，它会跟(老的，不鼓励使用)的

valign

属性的作用一样。在现代浏览器里，下面的这三种写法的效果是一样的：

<td valign="middle"> <!-- 这是一种会逐渐被淘汰的用法 --> </td> <td style="vertical-align:middle"> ... </td> <div style="display:table-cell; vertical-align:middle"> ... </div>

在浏览器中，它们的现实效果是下面这样：

<td> 使用 valign="middle"

<td> 使用 valign="bottom"

<td> 使用 vertical-align:middle

<td> 使用 vertical-align:bottom

<div>

使用

display:table-cell; vertical-align:middle

<div>

使用

display:table-cell; vertical-align:bottom

vertical-align在inline元素上效果

然而，当

vertical-align

被应用的到inline元素上时，它的作用却是类似(老的，不鼓励使用)的

valign

属性对

<img>

的作用一样。在现代浏览器里，下面的这三种写法的效果是一样的：

<img align="middle" ...> <img style="vertical-align:middle" ...> <span style="display:inline-block; vertical-align:middle"> ... </span>

在浏览器中，它们的现实效果是下面这样：

在这个段落中，我放了两个图片—

和
http://www.webhek.com/wordpress/wp-content/uploads/2014/05/align_bottom.gif" border="0" >
—作为例子。

在这个段落中，我放了两个图片—
http://www.webhek.com/wordpress/wp-content/uploads/2014/05/verticalalign_middle.gif" border="0" >
和
http://www.webhek.com/wordpress/wp-content/uploads/2014/05/verticalalign_bottom.gif" border="0" >
—作为例子。

在这个段落中，我用

<span>

display:inline-block
vertical-align:middle 和 display:inline-block
vertical-align:text-bottom 作为例子。

vertical-align在其它元素上的效果

技术上，某个CSS属性并不是在任何的HTML元素上都是生效。当一个新手将

vertical-align

属性应用到一个block元素(例如标准的

<div>

)上时，大多数浏览器会依照继承的原则，将所有它的inline子元素也应用这个属性。

那么，如何将一个元素竖向居中？

如果你在读这篇文章，你很可能对为什么你的写法不好用并不感兴趣。你感兴趣的很可能是如何能让它起作用。

方法一

下面的方法有两个(小)前提。如果你能做到这些前提，那么这个方法适用于你：


如果你能接受上面的两个必要条件，那么，方法是这样的：


下面是CSS代码：

<style type="text/css"> #myoutercontainer { position:relative } #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em } </style>

下面是HTML代码：

<div id="myoutercontainer"> <div id="myinnercontainer"> <p>Hey look! I'm vertically centered!</p> <p>How sweet is this?!</p> </div> </div>

在浏览器中，上面的代码会产生如下的效果：

海，看看！我竖向居中了！

好厉害，不是吗?!

方法二

这个方法需要你满足下面的前提条件：


如果你能接受上面的条件，那么，方法是这样：


观看演示
下面是CSS代码的写法：

<style type="text/css"> #myoutercontainer2 { line-height:4em } </style>

下面是HTML代码的写法：

<p id="myoutercontainer2"> 嗨，我竖向居中了，耶！ </p>

在浏览器中，上面的代码会产生如下的效果：

嗨，我竖向居中了，耶！
转自 http://www.webhek.com/vertical-align