css设置表格网页居中

在网页设计中，表格是常见的元素，而使表格居中显示也是常用的技巧。下面介绍如何使用 CSS 来设置表格网页居中。

/* HTML */table class="center">
    tr>
    th>
    姓名/th>
    th>
    年龄/th>
    /tr>
    tr>
    td>
    张三/td>
    td>
    20/td>
    /tr>
    tr>
    td>
    李四/td>
    td>
    22/td>
    /tr>
    /table>
/* CSS */.center {
    margin: auto;
}
    

以上代码中，将表格放在一个 class 为 center 的 div 中，使用 CSS 的 margin 属性设置 div 居中。需要注意的是，该方法仅适用于固定宽度的表格。

如果表格宽度不固定，可以将表格的 display 属性设置为 inline-block，并在父元素中使用 text-align 属性来居中。

/* HTML */div class="center">
    table>
    .../table>
    /div>
/* CSS */.center {
    text-align: center;
}
.center table {
    display: inline-block;
}
    

这样可以解决表格不固定宽度的问题，且支持在 div 中添加多个表格或其他元素进行排列。

综上，使用 CSS 设置表格网页居中不仅可以美化页面布局，还可以提高用户体验。需要根据实际情况选择不同的方法来实现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！