在網頁設計中,為了讓網頁看起來更美觀整潔,通常需要把元素居中顯示。在CSS中,我們可以使用text-align屬性來水平居中元素。
例如,要讓p標簽中的文字水平居中,可以這樣寫:
p { text-align: center; }
這會將p標簽中的文字居中顯示。
如果想要讓一個塊級元素(如div)水平居中,可以將其設置為“塊級元素”,并將其左右margin設置為“自動”。
例如,要讓一個div塊級元素水平居中,可以這樣寫:
div { display: block; margin: 0 auto; }
這會將div居中顯示,而且margin的值會根據頁面寬度自動調整,使div在水平方向上居中。
當然,要想實現垂直居中則需要使用其他方法,比如flex布局或者使用絕對定位結合top、left、bottom、right屬性來實現。不過在大多數情況下,水平居中已經足夠滿足我們的需求了。
上一篇居中css樣式