文字居中包括水平居中和垂直居中,當水平居中和垂直居中同時運用在一個塊元素中就可以達到文字在一個板塊中的居中效果了。
垂直居中
需要用到 line-height 屬性。
<div style="width: 100px;
height: 60px;
line-height: 60px;
background-color: yellow;
color: black;">1</div>
line-height屬性的作用是:設置對象內容的行高,既字體最低端與字體內部頂端之間的距離。如果沒有屬性 line-height,此時div中的內容默認是在這個div 的左上角。加上line-height:60px;意思是:讓這裏面的文字每一行佔36個像素,那麼,此時這一行文字的高度正好和div的高度相同。 就表現出垂直居中的效果了。
水平居中
屬性 text-align,設置對象中內容的水平對齊方式。屬性值爲 center時,則表示內容居中對齊。
兩個屬性寫在同一個div中
<div style="width: 100px;
height: 60px;
line-height: 60px;
text-align:center;
background-color: yellow;
color: black;">1</div>
則居中