CSS定位是一種非常有用的技巧,可以對一個元素在頁面上的位置進行精確控制。其中一個常見的需求就是將文字居中對齊,下面我們來詳細介紹一下怎樣實現。
.center{ text-align: center; /*水平居中*/ line-height: 100px; /*垂直居中*/ height: 100px; /*必須有高度*/ }
如上代碼所示,實現居中對齊需要兩個步驟:
1. 水平居中
使用text-align屬性可以將文字在元素內水平居中。比如將我們要居中對齊的文字放在一個div中,那么只需要給這個div加上text-align: center;即可實現水平居中對齊。
2. 垂直居中
上一步僅僅實現了文字的水平居中,但是如果我們想要讓文字在垂直方向上也居中,就需要再加上一些其他的屬性。首先需要給div加上一個固定的高度,比如我們這里設置高度為100px。然后再設置line-height: 100px;即可實現垂直居中對齊。值得注意的是,這里的line-height值一定要和div的高度相等才能實現垂直居中效果。
總結一下,要實現居中對齊,需要兩個步驟,即水平居中和垂直居中。水平居中只需要設置text-align: center;就可以,而垂直居中則需要設置固定高度和line-height: 相同值;。這樣就可以輕松實現文字的居中對齊啦。
下一篇css定位布局筆記