如何在高度未知的div中垂直居中文本？-css教程-PHP中文网

如何在高度未知的div中垂直居中文本？

Patricia Arquette

发布： 2024-11-11 09:52:02

原创

726 人浏览过

How to Vertically Center Text in a Div of Unknown Height?

Div 中的动态垂直文本对齐

在未知高度的 div 中实现垂直文本居中可能是一个挑战。让我们深入研究一个无论 div 尺寸如何都能确保一致对齐的解决方案。

该解决方案利用 display 属性将包装元素设置为表格。这允许我们在想要居中的元素中利用垂直对齐属性。

示例代码：

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

登录后复制

body {width: 100%; height: 100%;}   /* This is just to "view" the div height... */

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

登录后复制

如何实现作用：

position:absolute和height:100%属性保证div覆盖网页的整个高度。
通过在div上设置display:table ，我们允许 h1 标签上的 table-cell 属性垂直对齐其内容。
vertical-align: middle 属性使 h1 标签在 div 内垂直居中。这可以确保即使 div 大小发生变化，文本也保持居中。

此解决方案已在各种浏览器和操作系统上进行了测试，包括 Internet Explorer、Firefox、Chrome、Opera 和 Safari。它提供了一种简单有效的方法，使文本在动态高度的 div 内垂直居中。

以上是如何在高度未知的div中垂直居中文本？的详细内容。更多信息请关注PHP中文网其他相关文章！