Html如何設定元素垂直居中?

網頁中元素如何設為垂直居中,此時父元素垂直居中分為兩種情況:1:父元素高度確定的單行文字;2:父元素高度確定的多行文字。具體設定居中需要看下文了,哈哈

工具/原料

sublimeText3

1.單行文字垂直居中

單行文字是通過設定父元素的 height 和 line-height 高度一致來完成的,其中height是指元素的高度, line-height 是指行間距。

案例:寫一個

我是單行文字,我想垂直居中
,效果如圖:

Html如何設定元素垂直居中

結果如圖:

0 如何載入CSS樣式

Html如何設定元素垂直居中

2.多行文字垂直居中

父元素的高度確定,table標籤包裹然後設定vertical-align:middle

案例:寫三個

我是多行文字1,我想垂直居中

我是多行文字2,我想垂直居中

我是多行文字3,我想垂直居中

效果如圖:

Html如何設定元素垂直居中

table(因為td 標籤預設情況下就預設設定了 vertical-align 為 middle。所以不用重新再寫 vertical-align:middle)標籤包裹程式碼設定和效果圖如下:

Html如何設定元素垂直居中

Html如何設定元素垂直居中

注意事項

如果對您有幫助,麻煩投個票,點個贊,謝謝

網頁, 情況, 元素, 文字, 父元素,
相關問題答案