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类。

如果您注释掉margin: 45px规则，那么您的表格就会中心。

请参阅演示：http://jsfiddle.net/audetwebdesign/JxMD3/

注意：使用边距来居中表格
正如其中一条评论中所指出的，即使您没有指定宽度（即使用width: auto），使用自动左/右边距也会使表居中。（
使用{{1}}）。参考：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;
    }

我似乎无法将这张桌子放在中心位置

2 个答案: