首页 > 文章 > web前端 > 如何在动态高度 Div 中垂直居中文本？

如何在动态高度 Div 中垂直居中文本？

Barbara Streisand原创: 2024-11-07 12:13:03430浏览

How to Vertically Center Text in Dynamically Height Divs?

动态高度 Div 中的垂直文本对齐

将网站元素定制为用户可调节的浏览器高度时，通常必须确保垂直对齐动态高度 div 内的文本保持居中。如何实现这一点？

考虑以下 HTML 结构：

<body>
    <div>

垂直对齐

边界

内的标签无论其高度如何，都采用以下策略：

解决方案： 利用 display 属性将包装器

设置为元素作为表格，允许垂直对齐属性将所包含的元素居中。

示例代码：

HTML

<body>
    <div>
        Text

CSS

body {width: 100%; height: 100%;}   /* for visual demonstration of div height...*/

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

此方法已在各种浏览器和平台上进行了测试，包括：

已测试系统：

Windows XP Professional，Service Pack 3
Windows 7 家庭版，Service Pack 1
Linux Ubuntu 12.04

已测试浏览器：

Internet Explorer 8.0.6001.18702、9.0.8112.164211C
Opera 11.62
Firefox 3.6.16、12.0
Safari 5.1.2、5.1.4
Google Chrome 18.0.1025.168 m
Chromium 18.0.1025.151（开发者版本 130497 Linux）

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

chrome html Property this display table windows linux ubuntu

声明：

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

上一篇：How to Customize Cursor Images in CSS Across Different Browsers?下一篇：How to Eliminate Gaps in Stacked Bootstrap Rows?

查看更多