在CSS中,我們經常會使用“text-align”屬性來設置文本的對齊方式。通常情況下,文本都是水平居中對齊的。但是,有時候我們需要對文本進行垂直居中對齊,這時就需要用到“line-height”屬性了。
“line-height”屬性用于設置行高,指定行框盒子的最小高度。如果一個行框盒內沒有文字,那么這個盒子的高度就是行高。如果一個行框盒內有文字,那么這個盒子的高度就是文本字體的最小值和行高的最大值。
“line-height”的取值可以是絕對值,也可以是相對值。如果取值為絕對值,就表示行框盒子的高度是具體的像素值;如果取值為相對值,就會根據元素的字體大小進行相應的增加或減少。例如,如果取值為1.5,表示的就是字體高度的1.5倍。
p{ line-height: 1.5; text-align: center; }
上面的代碼設置了段落中文本的行高為字體高度的1.5倍,同時將文本水平居中對齊。如果需要將文本垂直居中對齊,可以將行高的值設置為元素高度的一半,例如:
p{ line-height: 50px; height: 100px; text-align: center; }
上面的代碼將段落的高度設置為100px,將行高設置為50px,這樣就能夠實現文本的垂直居中對齊了。
上一篇獲取css父節點的寬和高
下一篇css設計半透明