2

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

我还有一些数据显示在表格中（居中），只要表格适合父容器，它就可以正常工作。但有时表格会变得比父元素更宽，此时它不再居中，而是向左对齐。

有没有办法使表格居中，即使它溢出其父级，它也能保持居中？

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

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

顺便提一句。这可能很明显，但我在这里只谈论水平居中。

这是我的场景的一个小提琴：http: //jsfiddle.net/zrajm/tnAS3/

4

4 回答 4

3

CSSmargin: 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/）

于 2012-08-30T13:05:03.180 回答
1

你可以这样做： 

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

使用此代码，您的任何东西都是中心边距。
并且当您为表格声明固定宽度时，不能比它更宽。
你也可以给你的桌子一个宽度和高度。

于 2012-08-30T11:41:47.563 回答
1

我会尝试添加margin: 0 auto;到专门围绕表格的 div 的样式中。这应该将其置于其父级的中心。

<div class=content>
  <p>Lorem ipsum...</p>
  <div style="margin: 0 auto;">
    <table>
      ...
    </table>
  </div>
  <p>Lorem ipsum...</p>
</div>
于 2012-08-30T11:06:55.633 回答
0

对于这个 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/

于 2012-08-30T11:08:49.033 回答