CSS表格是Web開發中經常用到的一種元素,用來呈現結構化的數據。在表格中,讓表格內容居中顯示是一個常見的需求,本文將介紹如何使用CSS來實現內容居中。
首先,在表格的CSS中加入以下代碼:
table { margin: auto; /* 讓表格自動居中 */ border-collapse: collapse; } td { text-align: center; /* 讓單元格內容居中 */ vertical-align: middle; /* 讓單元格垂直居中 */ border: 1px solid #ccc; /* 給單元格加邊框,方便觀察 */ padding: 10px; /* 讓單元格內的內容與邊框有一定距離 */ }
上述代碼中,我們通過設置表格的margin為自動,來讓表格水平居中。同時,通過設置單元格的text-align屬性為center,來讓單元格內的內容水平居中。以及設置單元格的vertical-align屬性為middle,來讓單元格內的內容垂直居中。
接下來,我們來創建一個如下的表格:
<table> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>張三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> </table>
運用上述代碼創建的表格如下:
姓名 | 年齡 | 性別 |
---|---|---|
張三 | 18 | 男 |
李四 | 20 | 女 |
可以看到,這個表格里的內容已經被居中顯示了。
總之,通過設置表格和單元格的CSS屬性,我們可以很輕松地讓表格內的內容居中顯示。
上一篇css表格邊距會出現
下一篇css插入音樂不播放