如何在响应式 div 元素中垂直居中文本？

Patricia Arquette

发布： 2024-11-09 04:20:02

原创

485 人浏览过

How to Vertically Center Text in a Responsive Div Element?

响应式 Div 元素中的垂直文本对齐

处理动态大小的 DIV 容器中的内容时，垂直对齐文本可能具有挑战性。本问题探讨如何在 DIV 元素内垂直居中文本，无论其高度如何。

问题陈述：

考虑以下 HTML 结构：

<body>
    <div>

登录后复制

无论 DIV 的高度如何，H1 标签如何在 DIV 内垂直居中？

解决方案：

最有效的解决方案是利用 display 属性。通过将包装元素设置为表格，我们可以使用vertical-align:middle来使元素居中：

<body>
    <div>
        Text

登录后复制

body {width: 100%; height: 100%;}  /* For visualization purposes */

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

登录后复制

测试：

该解决方案已在各种平台和浏览器上进行了测试，包括：

Windows XP Professional versão 2002 Service Pack 3

Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m

Windows 7 家庭版 Service Pack 1

Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

Firefox 12.0
Chromium 18.0。 1025.151（开发者版本 130497 Linux）

以上是如何在响应式 div 元素中垂直居中文本？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：如何设置 div 背景的不透明度而不影响 IE 8 中包含的元素？下一篇：如何使用第 n 个子选择器对具有“父”类的列表项应用交替颜色？

本站声明

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

作者最新文章