如何在div中水平居中表？

Question

我在<div> <table>里面有一個<table> ，下面的樣式，表沒有居中，為什么？

不應該將<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;
}

這是一個小提琴： https ： //jsfiddle.net/7mhpv51s/1/

Answer 4

只需在表格中添加保證金，如下所示。 當您對table使用margin:auto ，它會將您的table與div center align 。 而當你在這個<div>它時，它會將它與browser中心對齊。

table{
margin :auto;
}

而不是div，

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

Answer 5

嘗試這個：

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