Question

我的页面有一个主页面，它以页面为中心。我这样做是通过使用margin：auto;

页面本身运行良好 - 但是一旦我包含一个从数据库动态加载数据的表，页面就不能正确对齐初始中心。

请参阅以下示例：

<!DOCTYPE html>
<html>
<head>
<title>Invoice Control</title>
</head>

<body class="single">

<div id="wrapper" style="width:1100px;margin:auto;padding:10px; border: 1px solid gray">

    <div id="content" style="border: 1px solid red">

        here comes the table, which makes the site not center nicely

        <table>
            <tr>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
            </tr>
        </table>

    </div>
</div>

</body>
</html>

知道我必须做什么，以确保居中的div再次正确居中？

Answer 1

问题与你的div溢出有关。正如你的演示显示你有一个大小为1100像素的盒子正确居中，但你的桌子正在出来。原因是由于无法拆分的单词强制列的最小宽度，因此表格不能变得更小。

根据您的目的，有几种方法可以解决这个问题。我认为最好的是将width: 1100px;更改为min-width:1100px。如果div的内容想要大于1100px，这将允许div扩展。

或者，您可以使用div上的溢出样式来创建滚动条或隐藏溢出。

Answer 2

感谢您的回复。

他们指出了我正确的方向，即使我决定采用另一种解决方案。

我不喜欢“最小宽度”的事实是桌子总是缩放到100％。在我的例子中，文本“这是填充表格并超过1100PX的文本”并未最多挤压在一起，但占用了网站上的所有可用空间。听起来不错，但实际上并不适合我页面的其他部分（例如背景图片）。 “超宽”表在我的上下文中是一个例外，我想确保将表压缩到最大值并且站点“尽可能少地”增长。

因此我使用了一些java脚本来帮助我。我找出了桌子的宽度</ p>

if ($(".myTable").width() > 1100px) {
      $(".myTable").width($(".myTable").width() + 5);
}

知道这可能不是它为目的提供最美妙的解决方案。或者你有什么想法我可以应用于表格，以确保它总是缩小到最小，如果它超过“居中div”的1100px？

如果表太宽，div不居中

2 个答案: