首页 > 文章 > web前端 > 如何在高度未知的div中垂直居中文本？

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

Patricia Arquette原创: 2024-11-11 09:52:02697浏览

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中文网其他相关文章！

firefox chrome safari Property this display position table

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Why isn't my 'position: sticky' footer working when I define a 'height' property?下一篇：How to Remove the Unwanted Click Outline from Buttons?

查看更多