无法在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;    

} 

他们的包裹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"但是即使是中等大小的屏幕,它们也会在另一个之下,看起来很难看

我用flexbox取代了桌子,在小屏幕上很棒,但是再次在中等屏幕上他们不会把一个网络粘在另一个上面看起来很难看

我尝试添加margin-left,margin-right对表和包裹,但没有.

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

谢谢

Answer 1

你的代码中有很多错误.

你在HTML 之间class="heyT"和之间放了一个逗号id="heyTS",以及一些不需要的空格

在您的CSS中,您已经使用过alignment-adjust,任何浏览器都不支持(我认为？).谷歌搜索该属性并没有使W3C或Mozilla规范显示出来.你也用align-self和align-content,这是柔性框属性.您没有在代码中使用flex-box.你也在使用align,没有任何意义.

然后是你申请的地方margin: 0 auto;,但在那之后你申请margin-left: 1%;和margin-right: 1%;.将这些规则放在一起意味着您最终得到的边距为0 1% 0 1%(顶部和底部为0,左侧和右侧为1%).

解决您的问题

在这个小提琴中,您可以看到桌子的宽度为50%,并且它与中心对齐.您可以删除50%的宽度,并使其尽可能小.

我所做的就是取出容器div,因为它没有任何用途.我还删除了您申请的样式,#pointsTableSmall > tbody, #pointsTableSmall > tbody > tr因为它没有任何用途.

基本上,阻止你让它居中的东西是因为桌子的宽度是100%.使桌子居中的唯一必要条件是margin: 0 auto;宽度不是 100%

希望这可以帮助