在 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