如何在可调整大小的 Div 中垂直居中文本？

如何在可调整大小的 Div 中垂直居中文本

使用动态大小的 div 元素时，保持 div 内文本的垂直对齐可能很困难。当 div 的高度不固定时，就会出现此问题，因为它可能会根据用户浏览器高度等因素而变化。

解决方案：

解决此问题，一种通用的解决方案涉及利用显示属性将 div 元素转换为表格结构。通过将 display 属性设置为 table，我们在 div 中创建了一个类似表格的环境。这允许我们使用文本元素上的 Vertical-align 属性将其在 div 内垂直居中。

HTML 标记：

CSS样式：

已测试的著名浏览器：

使用此技术，我们已成功在各种浏览器中测试了 div 元素中文本的垂直居中，包括：

Windows XP：

• Internet Explorer 8
• Opera 11.62
• Firefox 3.6.16
• Safari 5.1.2
• Google Chrome 18

Windows 7:

• Internet Explorer 9
• Opera 11.62
• Firefox 12
• Safari 5.1.4
• Google Chrome 18

Linux Ubuntu 12.04:

• Firefox 12
• Chromium 18

以上是如何在可调整大小的 Div 中垂直居中文本？的详细内容。更多信息请关注PHP中文网其他相关文章！