无法在 Firefox 中居中表格

Question

所以我有这两张表

    <table  id="pointsTable" >
          <th> One </th>                                           
          <th> Two </th>                               
          <th> Three </th>
          <tr>
           <td  id="one" ></td>               
           <td  id="two"></td>              
           <td  id="three"></td>                            
          </tr>
    </table>                                                                            
            
   <table id="pointsTableSmall" style="text-align: center;">
          <tr>
             <th> One </th>
          </tr>
          <tr>
          <td  id="one"></td>
          </tr>
          <tr>
          <th>Two </th>
          </tr>
          <tr>
          <td  id="two" ></td>
          </tr>
          <tr>
          <th>Three</th>
          </tr>
          <tr>
          <td  id="three" ></td>
          </tr>
   </table>

第一个在大屏幕中可见，第二个较小，在较小的屏幕中可见。

他们的css是

#pointsTable, #pointsTableSmall{
    border: 0;
    border-style: 0;   
    margin: auto !important;
    padding: auto;
    text-align: center !important;    
        
} 

他们的 wrap div 有

#pointWrap{
    text-align: center;
} 

在 Firefox 45.0.1 中，表格左对齐，有 margin:auto 并且没有填充。左侧对齐间隙与其容器div 之间的右侧有一个间隙。

我无法将 pointsTableSmall 表居中。我该如何解决这个问题？

谢谢

更新

现在，桌子是

            <div class="container center-block" id="pointsTableSmallWrap">
                <table id="pointsTableSmall" align="center" class="center-block">
                    <tr>
                      <th>Hey </th>
                    </tr>
                    <tr>
                      <td class="heyT", id="heyTS"> more hey</td>
                    </tr>
                    <tr>
                      <th>Hi</th>
                    </tr>
                    <tr>
                      <td class="hiA" id="hiAS" ></td>
                    </tr>
                    <tr>
                      <th>Yo</th>
                    </tr>
                    <tr>
                      <td class="yoU" id="yoUS" ></td>
                    </tr>
               </table> 
           </div>

每个<td> 都有来自progressbar.js 库的图形。

css是

#pointsTableSmall{
    display: none;
    text-align: center !important;      
    align-self: center; 
    alignment-adjust: central; 
    align-content: center;
    align : center;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    margin-left: 1%;
    margin-right: 1%;
}

#pointsTableSmallWrap{
    align-content: center;
    align-self: center;
    align-items: center;
    text-align: center;
    align :center;
    margin: 0 auto;
    width: 100%;
}

#pointsTableSmall > tbody, #pointsTableSmall > tbody > tr{
    align-content: center;
    align-self: center;
    align-items: center;
    text-align: center;
    align :center;
    margin: 0 auto;
    width: 100%;
    margin-left: 1%;
    margin-right: 1%;
}

问题

在 Firefox 中，表格始终位于左侧（查看图片以帮助您）。我不知道如何居中。我试过了

我用 bootstrap div class="col-md-4" 替换了 table，但即使在中等屏幕尺寸下，它们也会一个接一个，看起来很丑

我用在小屏幕上很棒的 flexbox 替换了 table，但在中等屏幕上它们又不会把一张网粘在另一张网上，看起来很丑

我尝试在表格和包装上添加margin-left、margin-right，但没有。

请帮我把这张表居中

谢谢

Answer 1

问题是您正在覆盖自己的边距声明：

margin: 0 auto;
margin-left: 1%;
margin-right: 1%;

代码变成：

margin: 0 1%;

为了在媒体查询中隐藏表格，在 block 和 none 之间更改 display 属性就足够了。

a) 将表格居中：

#pointsTableSmall {
  width: 100%;
  margin: 0 auto;
}

b) 居中 td 元素：

<td align="center" id="heyTS"> more hey</td>

示例：https://codepen.io/anon/pen/aNEgxz

Answer 2

如果你想让内表居中，无论你在调整大小时做什么，只要加上这个

1. margin-left:auto
2. margin-right:auto

在css中放入你想要的特定表的id...

Answer 3

overflow:auto;

我经常发现我遗漏了一些 CSS，这对于让 Margin: 0 auto; 正常工作至关重要。它必须有一个宽度。它不能向左、向右或居中浮动。它必须显示块。不能给 div 一个固定的位置。

参考这里：What, exactly, is needed for "margin: 0 auto;" to work?

Answer 4

这个问题还不清楚，但我认为你想使表格居中而不是文本居中对齐，

可能是您的表格在其他 css 中有 float 属性，这就是为什么您的元素不居中的原因 margin:auto; 将无法与 floted 元素一起使用，如果您想居中，则必须删除 float 属性。

另一种解决方案在表格之前取另一个元素并在其中使用表格

HTML

<div class="center">
   // your table here
</div>

CSS

.center {
   width:500px; /* waht ever width */
   margin:auto;
}

注意：在您的代码中，您在 tr 中使用Margin 属性，margin 属性不适用于display:table display:table:cell; display : table-row 请参阅here

Answer 5

我建议您将表格封装在一个 div 中，并使用 display: inline-block; 使该 div 居中对齐。和边距：自动；。 你可能需要给你的桌子一个宽度=100%

Answer 6

我忘了提到#pointsTableSmall 的css 有display: none;，然后我写了一些媒体查询让它在小屏幕上可见。

所以在我的媒体查询中我会这样做

  #pointsTableSmall {
    display: block;
  }

我所要做的就是用 Gust van de Wal 写的 here 替换 #pointsTableSmall 的 css。

完全删除关于#pointsTableSmallWrap和#pointsTableSmall > tbody, #pointsTableSmall > tbody > tr的css并删除pointsTableSmallWrapdiv本身。

还有，这里是诀窍，替换

  #pointsTableSmall {
    display: block;
  }

与

  #pointsTableSmall {
    display: inline;
  }

display: inline 是默认值。

这就是诀窍。这。曾是。诀窍。只是一个简单的值。哦，我喜欢 CSS。

Answer 7

您的代码中有很多错误。

您在 HTML 中的 class="heyT" 和 id="heyTS" 之间添加了一个逗号，以及一些不需要的空格

在您的 CSS 中，您使用了 alignment-adjust，任何浏览器都不支持（我认为？）。谷歌搜索该属性并没有显示 W3C 或 Mozilla 规范。您还使用了 align-self 和 align-content，它们是 flex-box 属性。您没有在代码中使用 flex-box。你也用align，没有意义。

然后是你申请margin: 0 auto;的地方，然后你申请margin-left: 1%;和margin-right: 1%;。将这些规则结合在一起意味着您最终会得到 0 1% 0 1% 的边距（顶部和底部为 0。左右为 1%）。

您的问题的解决方案

在this Fiddle 中，您可以看到表格的宽度为 50%，并且与中心对齐。你可以去掉 50% 的宽度，让它尽可能的小。

我所做的只是删除容器div，因为它没有任何用途。我还删除了您应用于 #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr 的样式，因为它没有任何用途。

基本上，阻止您将其居中的原因是表格的宽度为 100%。将表格居中唯一需要的是margin: 0 auto; 和不是 100%

的宽度

希望对你有帮助