迹忆客 专注技术分享

我们将介绍三种在 CSS 中垂直对齐文本的方法。

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

如果我们有单行文本，我们可以使用 line-height 属性在 div 内垂直对齐文本。line-height CSS 属性设置行框的高度。它用于设置文本行之间的距离。但是，我们也可以使用它来垂直对齐单行文本。如果文本有换行符或多于一行，则此技术将不起作用。我们可以根据我们想要垂直对齐文本的位置的要求给 line-height 任何值。

例如，创建一个 div 并在其中写入一行文本。让我们给 div 一个 center 的类名。在 div 内写一个单行文本 Vertically aligned。给 div 一个 100px 的 height 和 100px 的 line-height，使文本垂直对齐到 div 的中心。最后，给 div 一个 1px solid black 的 border 以查看垂直对齐。

下面的示例显示文本垂直对齐到 div 的中心，该 div 包含 100 px 的 height 和 1px solid black 的 border 使用 CSS line-height 属性。

示例代码：

<div class="center"> Vertically aligned </div>

.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

在 CSS 中在 div 内使用 span 和 line-height 属性垂直对齐文本

我们还可以使用 line-height 属性垂直对齐多个行。我们可以在 div 标签内放置一个 span 标签，并在 span 标签内放置多行。我们可以使用 br 标签来断行并使其成为多行文本。然后我们可以为 div 和 span 使用 line-height 属性。我们还将为 span 标签使用 display: inline-block CSS 属性来将多行代码包装在一起。因此，我们还必须使用 span 内的 line-height CSS 属性来将多行文本彼此分开。

例如，创建一个 div，然后在 div 内创建一个 span。在 br 标签的帮助下，在该 span 内写入多行文本。在 CSS 中选择 div 并指定 100px 的 height 并将 line-height 设置为 100px。设置 1px solid black 的 div 边框以查看对齐情况。将 span 标签的 display 属性设置为 inline-block 以将多行文本包装在一起。将 line-height 设置为 20px 到 span 以在多行文本之间留出空隙。保持 vertical-align 到 middle 以将文本垂直放置在中间。

下面的示例显示了在 line-height 和 display: inline-block 属性的帮助下，div 内多行文本的垂直对齐方式。

示例代码：

<div> 
    <span>
        Multiple <br> line <br> code
    </span>
</div>

div{
    height : 100px;
    line-height: 100px;
    border : 1px solid black
}
span {
    display : inline-block;
    vertical-align : middle;
    line-height : 20px;
}

在 CSS 中使用 flexbox 垂直对齐文本

我们还可以使用 flexbox 来垂直或水平对齐 div 中的文本。我们可以通过将 display 属性设置为 flex 来使用 flexbox。将 display 属性设置为 flex 后，我们可以使用 align-items 属性并将其值设为 center 以在 div 内垂直对齐文本。我们可以使用 justify-content 属性并将其设置为 center 以将文本水平居中放置在 div 中。Flexbox 非常易于使用，而且它们也非常有效。

例如，创建一个 div 并在其中写入单行或多行文本。使用 br 标签制作多行文本。给 div 一个 100px 的高度。将边框设置为 1px solid black 以查看对齐情况。将 display 属性的值设置为 flex 以使用 flexbox。然后，将 align-items 设置为 center 以将 div 内的文本垂直对齐到中心。我们还可以通过将 justify-content 的值置于 center 来水平对齐文本。

因此，我们可以使用 flexbox 在 CSS 中水平和垂直对齐文本。

示例代码：

<div>
    Align <br> Text to <br> Center
<div>

div {
    height : 100px;
    border : 1px solid black;
    display : flex;
    align-items : center;
    justify-content : center;
}