如何在div中水平居中表？

Question

我在<table>内有一个<div>，下面的样式，桌子没有居中，为什么？

<div>中的所有内容都不应该像我在CSS中设置的那样格式化吗？

HTML

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

CSS

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

Answer 1

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

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

如果你想让桌子居中，那么你必须让桌子居中。

table { margin: auto; }

Answer 2

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

您可以将table设置为内嵌表display: inline-table;，因此包含该表格的所有内联子项将在父text-align: center;上以div为中心。

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>

Answer 3

您可能想要使用

table{
    margin: auto;
}

这是一个小提琴：Lightbox2

Answer 4

只需在表格中添加保证金，如下所示。当您使用margin:auto table时align table center div <div>。然而，当您在browser上使用它时，它会将其与table{ margin :auto; } 的中心对齐。

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

而不是div，

print "This is my string with a number {}, cool!".format(42)

Answer 5

试试这个：

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