在 HTML 中,<table>
標簽通常用于展示數據。每一行的數據被包含在<tr>
標簽中,而每個單元格的數據則包含在<td>
標簽中。
在使用 CSS 居中<tr>
標簽時,常常會遇到以下問題:
- 居中只對單元格生效
<tr>
標簽無法設置寬度,因此無法使用margin: 0 auto;
居中- 使用
text-align: center;
時,<td>
中的文本也會居中
為了解決以上問題,可以使用以下代碼:
table { margin: 0 auto; width: 50%; /* 根據實際情況設定寬度 */ } tr { display: table; width: 100%; table-layout: fixed; text-align: center; } td { display: table-cell; vertical-align: middle; }
其中,display: table;
和display: table-cell;
用于模擬表格的布局,table-layout: fixed;
可以讓表格的列寬度固定,從而達到居中效果。至于vertical-align: middle;
則用于讓單元格內容垂直居中。
以上代碼將整個表格居中,且保證無論表格中有多少行,每一行都會居中。如有需要,可以根據實際情況進行微調。
上一篇css 讓圖片居中的代碼
下一篇mysql求前兩位小數