html - 在页面调整大小时动态居中 block ？

Question

无论屏幕尺寸如何，我都希望这些 block 始终位于页面的中央。

http://seriouslyineedthis.com/

问题是它总是向左浮动。

*我使用的是 Masonry 插件，但存在重叠问题(所以我不希望这是一个答案)。

在代码中我只是这样做:

<div id="content_holder_outside">
<div id="content_holder">
     <!-- Blocks and content go here -->
</div>
</div>

#content_holder_outside {
    width:100%;
    text-align:center;
    float:left;
    }

#content_holder {
    min-height:600px;
    }

它非常简单，但行不通。一切都仍然向左浮动。有什么想法吗？

Answer 1

如果您将 display: inline-block; 添加到您的 #each_box_holder 并从中删除 float:left，它将保持居中。

注意:将其从 id 更改为 class。 id 应仅在其唯一 时使用。在你的情况下它不是，所以使用 class 更好，并且会为你在功能方面省去很多麻烦。