在網(wǎng)頁開發(fā)中,表格是一個常用的元素。如果表格不居中,會給用戶帶來不舒適的視覺體驗。那么我們該如何使用CSS將表格居中呢?
table { margin: 0 auto; }
使用以上代碼,可以使表格水平居中。上述代碼的作用是使表格的左右邊距都自動為0,從而使表格水平居中。但是,如果表格沒有設(shè)置寬度,此方法將不起作用。因此,我們需要為表格設(shè)置寬度,以確保其正確居中。
table { width: 80%; margin: 0 auto; }
使用以上代碼,可以使表格水平居中并占用頁面80%的寬度。width屬性可以根據(jù)具體情況進行調(diào)整。同時,我們也可以使用text-align屬性將表格垂直居中。
table { width: 80%; margin: 0 auto; text-align: center; }
使用以上代碼,可以使表格垂直、水平居中并占用頁面80%的寬度。text-align屬性的作用是使表格內(nèi)的文字在表格中水平居中。
綜上所述,我們可以通過設(shè)置表格的寬度及margin屬性實現(xiàn)水平居中,通過text-align屬性實現(xiàn)垂直居中。