CSS 如何居中 table

Question

我正在为我的客户设置一个 WordPress 网站，但我在联系页面上遇到了一个小问题。

我无法将 table 与 phone 号码和电子邮件居中...

我尝试在 table 选择器上使用 margin:auto; text-align : center，但在 Chrome 检查器中的测试期间它从未从左移动到中心...

有什么想法可以帮助我吗？

下图显示了它的实际外观。我希望数字和邮件居中

Answer 1

您有一个 css 规则应用于文档中的所有表格：

table {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

您需要在 "wpb_wrapper" class

上覆盖宽度规则以自动

.wpb_wrapper table{width: 250px} /*or the value that you want*/

希望这可能有用。问候。

Answer 2

align属性可以直接在html中帮助你。

在您的 html 中，您可以替换为：

<table class=" aligncenter" style="height: 89px;" width="192">
<!-- The table -->
</table>

通过这个 :

<table style="height: 89px;" width="192" align="center">
<!-- The table -->
</table>

希望对您有所帮助

Answer 3

您可以在父级 table 上添加 text-align: center，然后在 tbody 中添加 display: inline-block。

请记住，text-align 将应用 inline 和 inline-block 显示元素的对齐方式。

Answer 4

从 table 的标签中删除 table 的宽度。
将此 table 包裹在 div 内。
将以下 CSS 分配给那个 div:

.div_class { 宽度：230px； /* 或任何适合你的 suitable 宽度 */ 显示：块；边距：0 自动 25px 自动； }

Answer 5

将此样式应用于 class 对齐中心：

.aligncenter {
    display: inline-block;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

还有这个给 tbody

tbody
{
  text-align: center;
  display: inline-block;
}

CSS how to center table