在CSS中,要使表格居中,可以使用margin: auto;
來(lái)自動(dòng)計(jì)算表格的左右邊距,從而實(shí)現(xiàn)居中效果,還需要設(shè)置表格的寬度,以便更好地控制表格的居中位置。
在HTML中創(chuàng)建一個(gè)表格,并設(shè)置其寬度為100%,在CSS中為該表格添加樣式,設(shè)置margin: auto;
來(lái)居中表格。
<table width="100%"> <tr> <td>表格內(nèi)容</td> </tr> </table>
table { margin: auto; width: 100%; }
這樣,表格就會(huì)在其父元素中水平居中,如果父元素的寬度大于表格的寬度,表格會(huì)居中并填充剩余的空間,如果父元素的寬度小于表格的寬度,表格會(huì)居中并溢出到下一行。
如果需要在表格內(nèi)部將單元格內(nèi)容居中,可以使用text-align: center;
來(lái)設(shè)置單元格內(nèi)容的水平對(duì)齊方式。
td { text-align: center; }
這樣,表格中的每個(gè)單元格內(nèi)容都會(huì)水平居中,如果需要垂直居中,可以使用vertical-align: middle;
來(lái)設(shè)置單元格內(nèi)容的垂直對(duì)齊方式。
td { vertical-align: middle; }
這樣,表格中的每個(gè)單元格內(nèi)容都會(huì)垂直居中,需要注意的是,vertical-align
屬性在HTML5中已被棄用,但在CSS3中仍然可以使用。