要想在網頁中使用表格進行排版,經常需要將表格垂直和水平居中。那么,在CSS中,如何設置表格居中呢?
首先,需要將表格的外部容器(一般是一個div元素)設置為相對定位:
然后,可以使用絕對定位將表格居中。垂直居中可以設置上下的位置為50%,水平居中可以設置左右的位置為50%。但是,這會使表格的左上角位于容器的中心,所以要再配合margin負值來進行微調。
這樣,就實現了表格的水平和垂直居中。通過設置不同的寬高和邊框等屬性,可以根據需要進行樣式的美化。
首先,需要將表格的外部容器(一般是一個div元素)設置為相對定位:
<div style="position:relative">
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
</div>
然后,可以使用絕對定位將表格居中。垂直居中可以設置上下的位置為50%,水平居中可以設置左右的位置為50%。但是,這會使表格的左上角位于容器的中心,所以要再配合margin負值來進行微調。
<div style="position:relative">
<table style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:auto">
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
</div>
這樣,就實現了表格的水平和垂直居中。通過設置不同的寬高和邊框等屬性,可以根據需要進行樣式的美化。
上一篇css改變a標簽間距
下一篇css表格行背景色設置