如何使用 CSS 在 DIV 元素中垂直居中对齐文本

qq_25153359

于 2024-05-30 22:05:00 发布

阅读量331

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_25153359/article/details/139335786

版权

答案：使用 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>