0

我试图让这个表格居中，但每当我查看页面时，它都会显示为左对齐。

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>
4

2 回答 2

3

问题是您的 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），使用 auto 的左/右边距也会使表格居中。
参考：http ://www.w3.org/TR/CSS2/tables.html#width-layout

注意：关于特异性
有关特异性如何工作的详细信息，请参阅：http ://www.w3.org/TR/CSS2/cascade.html#specificity

于 2013-07-27T22:21:46.027 回答
0

这应该从以下规则中删除“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;
    }
于 2013-07-28T17:17:42.513 回答