2

如果我在将 CSS 规则vertical-align: middle;应用于该单元格的表格单元格中，则所有文本都在单元格中垂直居中。

<table>
    <tr>
        <td style="vertical-align: middle;">
            I am vertically centered text!
        </td>
    </tr>
</table>

但是，如果我将其应用于另一个元素，它的功能会有所不同或根本没有。例如：

<div style="width: 300px; height: 400px; vertical-align: middle;">
    I am not vertically centered, but I wish I was :(
</div>

但是，如果我将它应用于图像标签，那么它会调整图像与其他内联元素的方向。

这是一个包含所有这些场景示例的 jsfiddle。

我的问题是，我怎样才能在一个简单的 DIV 中完成垂直居中对齐，就像它在表格单元格中的行为方式一样？

4

4 回答 4

2

添加display: table-cell到您的 div。

jsfiddle：http: //jsfiddle.net/7FYBa/20/

<div class="outer" style="position:absolute;">
    <div class="inner" style="display:table-cell; vertical-align:middle;">
        I am not vertically centered, but I wish I was :(
    </div>
</div>
于 2012-05-08T20:29:38.053 回答
2

但是当然。垂直居中在 CSS 中非常时髦。

我建议您阅读那里的一些垂直居中技术。不同的元素和考虑因素等同于不同的方法。这是我建议的一篇文章。

于 2012-05-08T20:36:14.550 回答
0

您可以使用 jQuery http://jsfiddle.net/7FYBa/30/尝试这样的事情

于 2012-05-08T20:41:30.647 回答
0

vertical-align当您增加line-height. 

#elem {
    vertical-align: middle;
    line-height: 100px;
}

但当然布局并不是那么容易使用line-height。

于 2012-05-08T20:45:07.407 回答