我似乎無法將這張桌子居中

Question

我試圖使該表居中，但是每當我查看該頁面時，它都顯示在左側。

的CSS

.center {

    margin-left:auto; 
    margin-right:auto;
  }
#hor-minimalist-a
{
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  background: transparent;
  margin: 45px;
  width: 480px;
  border-collapse: collapse;
  text-align: center;
  line-height: 1.6em;
}
#hor-minimalist-a th
{
  font-size: 14px;
  font-weight: normal;
  color: #039;
  padding: 10px 8px;
  border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
  color: #669;
  padding: 9px 8px 0px 8px;
}

這是我用來測試的html：

<table class="center" id="hor-minimalist-a" >
   All of the table data goes here
</table>

Answer 1

問題是CSS規則中的一種特殊性：

.center {
    margin-left:auto;
    margin-right:auto;
}
#hor-minimalist-a {
    font-family:"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    background: transparent;
    /* margin: 45px; */
    width: 480px;
    border-collapse: collapse;
    text-align: center;
    line-height: 1.6em;
    border: 1px dashed blue;
}

在CSS中，您已經設置了margin: 45px #hor-minimalist-a規則中的.center ，它的特異性比.center類中具有左/右margin規則的特異性高。

如果您注釋掉margin: 45px規則，則表格居中。

參見演示： http : //jsfiddle.net/audetwebdesign/JxMD3/

注意：使用邊距將表格居中
正如其中一項注釋中所指出的那樣，即使未指定寬度（即，使用width: auto ），使用auto的左/右邊距也會使表格居中。
參考： http : //www.w3.org/TR/CSS2/tables.html#width-layout

注意：關於特異性
有關特異性如何工作的詳細信息，請參見： http : //www.w3.org/TR/CSS2/cascade.html#specificity

Answer 2

這應該從以下規則中刪除“ margin：45px”：

    #hor-minimalist-a
    {
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      font-size: 16px;
      background: transparent;
      margin: 45px;
      width: 480px;
      border-collapse: collapse;
      text-align: center;
      line-height: 1.6em;
    }