在 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;
}