网页设计中常常需要使用表格来展示数据,而表格的样式调整是非常关键的一步。其中,让表格居中是应用最广泛的样式之一。接下来我们就来介绍如何使用CSS让table居中。
table { margin:0 auto; /* 设置margin值为0,自动计算左右margin值使其居中 */ text-align:center; /* 设置文字居中 */ }
以上是最基本的让表格居中设置,但是需要注意的是这段代码只能应用于内联或堆叠块级元素(比如div、p等),而表格的默认显示方式是表格布局(table layout),是一个表格类的独特元素。因此需要在容器元素中添加一个div元素才能让表格居中。
<div style="text-align:center;"> <table> <!-- table的内容 --> </table> </div>