“垂直对齐:中间”没有达到我的预期

`vertical-align: middle` doesn't do what I expected

本文关键字：我的 对齐 垂直 垂直对齐 中间      更新时间：2023-09-26

如果我在表格单元格中，将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>

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

下面是所有这些场景的示例。

我的问题是，如何在简单的 DIV 中完成垂直中心对齐，就像它在表格单元格中的行为方式一样？

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

js小提琴：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>

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

我建议你阅读一些垂直居中技术。不同的要素和考虑因素等同于不同的方法。这是我推荐的一篇文章。

你可以

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

当你增加line-height时，vertical-align适用于非表元素。 

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

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

相关文章：