在 CSS 中垂直居中文本

Sushant Poudel 2023年2月20日 2021年10月2日
  1. 在 CSS 中使用 line-height 属性垂直居中文本
  2. 在 CSS 中使用 displayvertical-alignline-height 属性垂直居中文本
  3. 模拟表格显示使 CSS 中的文本垂直居中
在 CSS 中垂直居中文本

本文将介绍在 CSS 中垂直居中文本的方法。

在 CSS 中使用 line-height 属性垂直居中文本

我们可以将 line-height 属性的高度设置为 div 以在 CSS 中垂直居中文本。line-height 属性指定线的高度。可以通过创建 div 元素的边框来说明。我们还可以使用 text-align 属性并将其设置为 center 以将文本水平居中对齐。

例如,在 HTML 中创建一个 div 并写入文本 Hello World!之间。接下来,在 CSS 中,将 div 的高度设置为 200px。此外,将 line-height 设置为相同的值。使用 text-align 属性将文本与 center 对齐。使用 border 简写属性创建一个 3px 宽度的 black 颜色的 solid 边框。

在下面的示例中,我们为 divline-heightheight 设置了相同的像素。因此,它垂直居中文本。但是,此方法仅适用于单行文本。

示例代码:

<div>
    Hello World!
</div>
div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

在 CSS 中使用 displayvertical-alignline-height 属性垂直居中文本

我们可以使用 displayvertical-alignline-height 等不同的 CSS 属性将文本居中显示在多行中。display 属性设置元素的显示行为。vertical-align 属性负责元素的垂直对齐。我们可以将 display 设置为 inline-block,将 vertical-align 设置为 middle 来实现多行文本的垂直对齐。

例如,在 HTML 中创建一个 div 并在其中写入 span。写下文本 Hello 并用 <br> 换行,然后写下 World!span 内。接下来,在 CSS 中,将 line-heightheight 设置为与 200px 相同的值,选择 div。像我们在第一种方法中所做的那样,为 div 设置一个边框并使文本居中对齐。然后,选择 span 并将 display 属性设置为 inline-block。然后,将 middle 的值赋予 vertical-align 属性。最后,将 line-height 的值设置为 normal

在下面的示例中,我们将 span 中的 line-height 属性更改为 normal,以使多行文本具有正常的 line-heightinline-block 值将在上一行的正下方开始文本的下一行。vertical-align 属性的 middle 值会将文本放置在垂直轴的中间。

示例代码:

<div>
    <span>Hello <br> World! </span>
</div>
div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

模拟表格显示使 CSS 中的文本垂直居中

我们可以将文本模拟为表格单元格,使其在 CSS 中垂直居中。我们使用 display 属性来模拟表格。我们还将使用 vertical-align 属性使文本垂直居中。我们将处理第二种方法的 HTML 片段,并对其应用新的 CSS。

首先,选择 div 并设置高度、宽度和边框。使用 display 属性并将值设置为 table。它会使 div 表现得像一张表。然后,选择 span 并将 display 属性设置为 table-cell,将 vertical-align 属性设置为 middle。将 span 元素设置为 table-cell 将使该元素类似于表格单元格。这样,我们就可以创建一个垂直居中的文本。

示例代码:

<div>
    <span>Hello <br> World!</span>
</div>
div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

相关文章 - CSS Alignment