Question

我正在使用一个HTML网站，其设计固定在一定宽度上，以auto为中心左右边距。我正在开发一个交互式脚本，有时会创建一个大表作为输出，不适合这个宽度，它可能更宽。

举例说明：

<html>
<body>
    <div style="margin: 10px auto; width: 300px; border: 1px blue solid;">
    &nbsp;
        <div style="margin: 10px auto; width: 400px; border: 1px red solid;">
        &nbsp;
        </div>
    </div>
</body>
</html>

（http://jsfiddle.net/ALPXn/）

我的问题是，我怎么能在中心对齐内部红色div，无论它是否伸出到蓝色div的两侧，而不给它一个明确的负左边距，因为我不知道最终宽度？

Answer 1

我认为你可以使用jquery来做到这一点。您可以动态更改css，页面加载后可以更改css。代码看起来与此类似。

var x = $('outerDiv').width();
var y = $('innerDiv').width();
$('innerDiv').css('left',-(y-x)/2);

为此，你必须将divis id作为outerDiv和innerDiv。

Answer 2

这里的问题是你必须让子元素忽略父元素的宽度和位置才能使它工作。但是有可能通过一些javascript操作。通过将css位置更改为绝对位置，并使其相对于屏幕居中，它将有效地忽略父级，同时在技术上仍然包含它。

使用offsetWidth更新链接：http://jsfiddle.net/g6dGE/1/

具有更宽的HTML块，在较窄的块内两侧具有相等的边距

2 个答案: