CSS 中怎樣實(shí)現(xiàn)表格居中?
在 CSS 中實(shí)現(xiàn)表格的居中其實(shí)非常簡(jiǎn)單,只需要在所在的 div 等元素中加入如下代碼即可:
```css
text-align: center;
```
如果您想讓表格在垂直方向上居中,也是非常簡(jiǎn)單的,只需要把上述代碼改成如下代碼:
```css
/* 對(duì)于 table 標(biāo)簽 */
table {
margin: auto;
}
/* 對(duì)于 table 標(biāo)簽內(nèi)的每個(gè)標(biāo)簽 */
tr {
display: table;
margin: auto;
}
/* 對(duì)于 table 標(biāo)簽內(nèi)的每個(gè)標(biāo)簽 */
td {
text-align: center;
vertical-align: middle;
}
```
上述代碼中的 `margin: auto;` 相當(dāng)于把表格的左右兩端均勻地填充,從而實(shí)現(xiàn)了水平居中。而對(duì)于實(shí)現(xiàn)垂直居中來(lái)說(shuō),我們需要將 ` ` 標(biāo)簽的 `display` 屬性設(shè)為 `table`,然后再把其上下兩端均勻地填充即可。至于 `td` 標(biāo)簽如何實(shí)現(xiàn)垂直居中,只需要設(shè)置 `vertical-align: middle;` 即可。
通過(guò)上述代碼實(shí)現(xiàn),可以輕松地讓你的表格在頁(yè)面上美觀而整齊地展示。
網(wǎng)站導(dǎo)航
- zblogPHP模板zbpkf
- zblog免費(fèi)模板zblogfree
- zblog模板學(xué)習(xí)zblogxuexi
- zblogPHP仿站zbpfang