網頁中元素如何設為垂直居中,此時父元素垂直居中分為兩種情況:1:父元素高度確定的單行文字;2:父元素高度確定的多行文字。具體設定居中需要看下文了,哈哈
工具/原料
sublimeText3
1.單行文字垂直居中
單行文字是通過設定父元素的 height 和 line-height 高度一致來完成的,其中height是指元素的高度, line-height 是指行間距。
案例:寫一個
在
結果如圖:
0 如何載入CSS樣式
2.多行文字垂直居中
父元素的高度確定,table標籤包裹然後設定vertical-align:middle
案例:寫三個
我是多行文字1,我想垂直居中
我是多行文字2,我想垂直居中
我是多行文字3,我想垂直居中
效果如圖:
table(因為td 標籤預設情況下就預設設定了 vertical-align 為 middle。所以不用重新再寫 vertical-align:middle)標籤包裹程式碼設定和效果圖如下:
注意事項
如果對您有幫助,麻煩投個票,點個贊,謝謝