Question

我有一组未浮动的块，但它们具有设置的宽度和高度并显示inline-block。理想情况下，我希望整个块在视口中居中。参见：

http://jsfiddle.net/hegQT/3/

问题在于，即使我创建了外部div inline-block并且它包含了它包含的div的宽度，margin: 0 auto也不会居中。 float也没有，我也尝试了很多其他的策略，例如收缩包装外部div无济于事。

单个区块无法浮动。

text-align: center会起作用，但如果最后一行有不同数量的块，它们将自己居中，我不希望这种情况发生。

这也需要在没有javascript的情况下工作。

Answer 1

我不确定我是否已经掌握了您正在寻找的确切功能，但这可能有所帮助：http://jsfiddle.net/ceSKJ/

Answer 2

margin: 0 auto;需要定义width。在我糟糕的解决方案中，#outman具有display: inline;以获得实际宽度，而额外的<div id="container">具有自动边距。需要javascript来将实际宽度设置为新div：

HTML：

<div id="container">
    <div id="outman">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

的CSS：

#container {
    margin: 0 auto;
}
#outman {
    display: inline;
}
#outman div {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 5px solid red;
}

的javascript：

$(document).ready(function() {
    $('#container').width($('#outman').width());
});

另见example。

=== UPDATE ===

如果您在html代码中的容器之后直接移动脚本并删除$(document).ready()：

，会更快

<div id="container">
    <div id="outman">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script type="text/javascript">
$('#container').width($('#outman').width());
</script>

另见updated example。

=== UPDATE ===

使用窗口调整大小：

<head>
...
<script type="text/javascript">
$(window).resize(function() {
    $('#container').css('width', 'auto');
    $('#container').width($('#outman').width());
});
</script>
...
</head>
<body>
...
<div id="container">
    <div id="outman">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script type="text/javascript">
$(window).resize();
</script>
...
</body>

和new example。

中心可以包裹的单个块

2 个答案: