css行高居中

css行高居中

CSS行高居中基础概念

CSS行高（line-height）是指文本行之间的垂直距离。通过设置行高，可以使文本在垂直方向上居中对齐。

类型

单行文本居中：适用于单行文本的垂直居中。
多行文本居中：适用于多行文本的垂直居中。

应用场景

网页标题：使标题在视觉上更加突出。
段落文本：提高段落的可读性和美观性。
表单标签：使表单标签与输入框对齐。

示例代码

单行文本居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS行高居中示例</title>
    <style>
        .center-text {
            line-height: 50px; /* 设置行高 */
            height: 50px; /* 设置容器高度 */
            text-align: center; /* 水平居中 */
        }
    </style>
</head>
<body>
    <div class="center-text">单行文本居中</div>
</body>
</html>

多行文本居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS行高居中示例</title>
    <style>
        .center-text {
            line-height: 2; /* 设置行高 */
            height: 100px; /* 设置容器高度 */
            text-align: center; /* 水平居中 */
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
    <div class="center-text">
        这是多行文本居中的示例。<br>
        通过设置行高和使用Flexbox布局，可以实现多行文本的垂直居中。
    </div>
</body>
</html>

遇到的问题及解决方法

问题：行高设置后文本仍然没有居中

原因：

容器高度未设置：如果容器高度未设置，行高设置无效。
Flexbox布局未使用：对于多行文本，需要使用Flexbox布局来实现垂直居中。

解决方法：

确保容器高度已设置。
使用Flexbox布局，并设置align-items: center;。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS行高居中示例</title>
    <style>
        .center-text {
            line-height: 2; /* 设置行高 */
            height: 100px; /* 设置容器高度 */
            text-align: center; /* 水平居中 */
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
    <div class="center-text">
        这是多行文本居中的示例。<br>
        通过设置行高和使用Flexbox布局，可以实现多行文本的垂直居中。
    </div>
</body>
</html>