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