在 CSS 中垂直對齊文字

Rajeev Baniya 2023年2月20日 2021年12月20日
  1. 在 CSS 中使用 line-height 屬性垂直對齊文字
  2. 在 CSS 中在 div 內使用 spanline-height 屬性垂直對齊文字
  3. 在 CSS 中使用 flexbox 垂直對齊文字
在 CSS 中垂直對齊文字

我們將介紹三種在 CSS 中垂直對齊文字的方法。

在 CSS 中使用 line-height 屬性垂直對齊文字

如果我們有單行文字,我們可以使用 line-height 屬性在 div 內垂直對齊文字。line-height CSS 屬性設定行框的高度。它用於設定文字行之間的距離。但是,我們也可以使用它來垂直對齊單行文字。如果文字有換行符或多於一行,則此技術將不起作用。我們可以根據我們想要垂直對齊文字的位置的要求給 line-height 任何值。

例如,建立一個 div 並在其中寫入一行文字。讓我們給 div 一個 center 的類名。在 div 內寫一個單行文字 Vertically aligned。給 div 一個 100pxheight100pxline-height,使文字垂直對齊到 div 的中心。最後,給 div 一個 1px solid blackborder 以檢視垂直對齊。

下面的示例顯示文字垂直對齊到 div 的中心,該 div 包含 100 pxheight1px solid blackborder 使用 CSS line-height 屬性。

示例程式碼:

<div class="center"> Vertically aligned </div>
.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

在 CSS 中在 div 內使用 spanline-height 屬性垂直對齊文字

我們還可以使用 line-height 屬性垂直對齊多個行。我們可以在 div 標籤內放置一個 span 標籤,並在 span 標籤內放置多行。我們可以使用 br 標籤來斷行並使其成為多行文字。然後我們可以為 divspan 使用 line-height 屬性。我們還將為 span 標籤使用 display: inline-block CSS 屬性來將多行程式碼包裝在一起。因此,我們還必須使用 span 內的 line-height CSS 屬性來將多行文字彼此分開。

例如,建立一個 div,然後在 div 內建立一個 span。在 br 標籤的幫助下,在該 span 內寫入多行文字。在 CSS 中選擇 div 並指定 100pxheight 並將 line-height 設定為 100px。設定 1px solid blackdiv 邊框以檢視對齊情況。將 span 標籤的 display 屬性設定為 inline-block 以將多行文字包裝在一起。將 line-height 設定為 20pxspan 以在多行文字之間留出空隙。保持 vertical-alignmiddle 以將文字垂直放置在中間。

下面的示例顯示了在 line-heightdisplay: 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;
}

相關文章 - CSS Alignment