如何使用 CSS 在 DIV 元素中垂直居中对齐文本
主题:HTML / CSS
答案:使用 CSS line-height 属性
如果您尝试使用 CSS 规则 vertical-align: middle; 将 div 内的文本垂直居中对齐，您将不会成功。 假设您有一个高度为 50px 的 div 元素，并且您在 div 内放置了一些要垂直居中对齐的链接。 最简单的方法是 — 只需应用值等于 div 高度的 line-height 属性，即 50px。
这个技巧背后的概念是，如果一个元素的 line-height 属性的值大于 font-size 的值，则差异（称为"领先"）被削减一半并均匀分布 在内联框的顶部和底部，将内联元素与元素垂直居中对齐。
让我们试试下面的例子来了解它的实际工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用 CSS 垂直居中文本</title>
<style>
.menu{
height: 20px;
line-height: 20px;
padding: 15px;
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
