在 CSS 中垂直對齊文字

1. 在 CSS 中使用 line-height 屬性垂直對齊文字
2. 在 CSS 中在 div 內使用 span 和 line-height 屬性垂直對齊文字
3. 在 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;
}