在 CSS 中垂直对齐文本
-
在 CSS 中使用
line-height
属性垂直对齐文本 -
在 CSS 中在
div
内使用span
和line-height
属性垂直对齐文本 -
在 CSS 中使用
flexbox
垂直对齐文本
我们将介绍三种在 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;
}