CSS中有很多屬性可以用來控制文本的格式,其中一個很重要的屬性就是text-align。這個屬性可以控制文本在其所在區域中的水平位置。
當我們想讓文本居中時,可以將text-align屬性的值設為center。下面是一個例子:
p { text-align: center; }
上面的代碼將會使所有包含在p標簽中的文本都居中。
需要注意的是,text-align屬性只會影響文本的水平位置,并不會影響其垂直位置。如果要讓文本垂直居中,我們可以使用其他的CSS屬性,比如line-height。
如果想要讓整個塊級元素(比如div)的內容居中,可以使用margin屬性。例如,下面的代碼將會使id為myDiv的div元素在其父元素中水平和垂直居中:
#myDiv { position: absolute; /*先設置定位*/ top: 50%; left: 50%; transform: translate(-50%, -50%); /*使用transform屬性居中*/ width: 200px; /*為div元素設定寬度*/ height: 200px; /*為div元素設定高度*/ margin: -100px 0 0 -100px; /*使用margin屬性使其水平垂直居中*/ }
上面這段代碼使用CSS3中的transform屬性來實現居中。translate屬性可以用來移動元素,-50%的值即為元素寬度(或高度)的一半,這樣使得元素移到父元素的中心位置。最后結合margin屬性來微調元素位置,即可實現水平垂直居中的效果。
下一篇css偽類箭頭