如何在 div 中水平居中表格？

Question

我在一个 <div> 中放了一个 <table>，应用了以下样式，但是表格没有居中，为什么？

难道不应该将 <div> 中的所有内容都按照 CSS 样式进行格式化吗？

HTML

<div> 
  <table></table> 
</div> 

CSS

div{ 
  border: 5px solid white; 
  border-radius: 5px; 
  margin: auto; 
  text-align: center;
} 

- gte_

Answer 1

你在div上设置了margin: auto，所以该div将居中显示...但你也将该div保留为width: auto，因此它将与其容器一样宽（一旦考虑到边距、填充和边框）。

你在div上设置了text-align: center，因此div的内联子元素将居中，但表格不是内联的，因此不受影响（取决于继承，某些表格单元格内容可能会受到影响）。

如果你想让表格居中显示，那么你必须将表格本身居中对齐。

table { margin: auto; }

- Quentin

---

无法工作。表格需要设置布局样式吗？ - lohiarahul

@lohiarahul — 不。 - Quentin

Answer 2

div元素是块级元素，块级元素占据其父容器的全部空间，因此margin: auto;默认情况下没有任何效果。而text-align: center;仅适用于内联级子元素，但table不是其中之一。

您可以将table设置为行内表格display: inline-table;，这样所有行内子元素（包括表格）都将通过父div的text-align: center;居中显示。

div {
  border: 1px solid red;
  text-align: center;
}
table {
  border: 1px solid blue;
  display: inline-table;
}

<div>
  <table>
    <tr>
      <td>Hello world</td>
    </tr>
  </table>
</div>

- Stickers

Answer 3

你可能想要使用

table{
    margin: auto;
}

这是一个 JSFiddle：https://jsfiddle.net/7mhpv51s/1/。

- Cephou

Answer 4

只需将边距添加到您的表格中，如下所示。当您对table使用margin:auto时，它会将您的table align到div的center。而当您在此<div>上使用它时，它将使其对齐到browser的中心。

table{
margin :auto;
}

而不是div标签

div{
margin:auto /*No need over-here*/
}

- frnt

Answer 5

尝试这个：

div{
width: 80%; /* try different value for this */
margin: auto;
}
table{
margin: auto;
}

- Abk