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;    

}

他们的包装div

#pointWrap{
    text-align: center;
}

在Firefox 45.0.1中，表格左对齐，边距为：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"替换了表，但是即使是中等大小的屏幕，它们也会在另一个之下，看起来很难看

我用小屏幕上的awbox取代了桌子，但是在中等屏幕上，他们不会将一个网络粘在另一个上，看起来很难看

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

请帮我把这张桌子放在中心

由于

Answer 1

您的代码中存在许多错误。

您在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％

希望这有帮助

Answer 2

overflow:auto;

很多时候，我发现我错过了一些CSS，这对于允许Margin: 0 auto;工作至关重要。它必须有宽度。它不能向左，向右或居中浮动。它必须显示块。你不能给div一个固定的位置。

请参阅此处：What, exactly, is needed for "margin: 0 auto;" to work?

Answer 3

问题在于您使用以下内容覆盖自己的保证金声明：

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

代码变为：

margin: 0 1%;

要隐藏媒体查询中的表格，在块和 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 4

我忘了提到#pointsTableSmall的css有display: none;，然后我写了一些媒体查询，以便在小屏幕上显示。

所以在我的媒体查询中

  #pointsTableSmall {
    display: block;
  }

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

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

此外，这是诀窍，替换

  #pointsTableSmall {
    display: block;
  }

带

  #pointsTableSmall {
    display: inline;
  }

display: inline是默认值。

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

Answer 5

我建议你将表封装在div中，并使用display：inline-block将中心对齐到这个div;和保证金：auto;。你可能需要给你的表格宽度= 100％

Answer 6

问题不明确，但我认为你想制作表格中心而不是文本对齐中心，

可能是您的表格在其他css中有float属性，这就是为什么您的元素不居中margin:auto;无法使用floted元素，如果您想要居中删除浮动属性。

另一个解决方案在表之前使用另一个元素并在其中使用表格，例如

Html

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

CSS

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

注意：在您的代码中，您在 tr 中使用Margin属性，保证金属性不适用于display:table { {1}} display:table:cell;请参阅here

Answer 7

如果您想将内部表放在中心位置，无论您在调整大小时执行什么操作，只需添加此

margin-left:auto
margin-right:auto

到css中想要的特定表的id ...

无法在firefox中居中

7 个答案:

您问题的解决方案