中心表，即使它比父容器宽

Question

我有一个场景，其中HTML页面的宽度是有限的（使用max-width），以便页面上的文字不会变得太宽（并且难以阅读）。

我也有一些表格中显示的数据（居中），只要表格适合父容器，它就可以正常工作。但有时候一个表变得比父元素宽，此时它会停止居中，而是与左边对齐。

是否有一种方法可以使一个表居中，使其即使溢出其父级也会保持居中？

鉴于我的HTML看起来像这样，完成此操作需要什么CSS？

<div class=content>
  <p>Lorem ipsum...</p>
  <table>
      ...
  </table>
  <p>Lorem ipsum...</p>
</div>

顺便说一句。这可能是显而易见的，但我只是在谈论水平居中。

以下是我的方案的小提琴：http://jsfiddle.net/zrajm/tnAS3/

Answer 1

CSS margin: 0 auto;只有在表格适合其父元素的情况下才有效，如果表格大于左对齐的表格。

为了使一个宽于其父表的中心表需要设置一个负左边距。如果知道表的确切维度，可以直接在CSS中完成（使用margin-left: -130px之类的东西）。但是，如果表的宽度可能不同，那么实现此目的的唯一方法是使用Javascript调整左边距。

（下面的代码假定了jQuery，以及问题中描述的HTML结构。）

var contentWidth = $('.content').width();
$('table').each(function (i, table) {
    var tableWidth, margin;
    table = $(table);
    tableWidth = table.width();
    if (tableWidth > contentWidth) {
        margin = (tableWidth - contentWidth) / 2;
        table.css('margin-left', '-' + margin + 'px');
    }
});

上述脚本将查找比.content更宽的表格，并仅修改其左边距。

（还有一个小提琴：http://jsfiddle.net/zrajm/tnAS3/2/）

Answer 2

我会尝试将margin: 0 auto;添加到专门围绕桌子的div的样式中。这应该把它放在它的父母的中心。

<div class=content>
  <p>Lorem ipsum...</p>
  <div style="margin: 0 auto;">
    <table>
      ...
    </table>
  </div>
  <p>Lorem ipsum...</p>
</div>

Answer 3

你可以这样做：

.calss  
{    
    margin:auto;    
    width:??px ;        
    height:??px ;/*(or auto)*/        
}   

使用此代码，您的任何内容都是中心边距 当你宣布一个固定的宽度为你的桌子不能比它 你也可以给你的桌子宽度和高度。

Answer 4

仅对于此HTML，无需更改HTML部分：

<div class=content>
  <p>Lorem ipsum...</p>
  <table>
      ...
  </table>
  <p>Lorem ipsum...</p>
</div>

CSS将是：

table {margin: 0 auto;} /* You can set your width */

小提琴：http://jsfiddle.net/svHvR/1/