html - 如何在没有设置宽度的情况下居中对齐div

Question

我正在创建 Masonry 样式的页面布局，并且我正在尝试找到一种在页面不是全尺寸时将图 block 居中的方法。我现在拥有的是:

| [ TILE ] [ TILE ] [ TILE ] [ TILE ] | //Full Width

| [ TILE ] [ TILE ] [ TILE ]          | //Lower Screen Resolution
| [ TILE ]                            |

我想要的是:

| [ TILE ] [ TILE ] [ TILE ] [ TILE ] | //Full Width

|      [ TILE ] [ TILE ] [ TILE ]     | //Lower Screen Resolution
|      [ TILE ]                       |

我试过按照之前帖子中的建议使用内联 block ，但这在这里不起作用，可能是因为“Tile's”是 float 的。有解决办法吗？

谢谢

Answer 1

这是一个使用 CSS3 媒体查询的答案。只需将包含元素的宽度调整为它可以容纳的元素数。我的示例过于简单，但可以得到您想要的结果。

即在我的示例中，每个元素总计 200px。如果屏幕是 1000px 宽，那么它可以容纳 5 个元素。一旦它达到 959px 宽，它就不能再容纳 5 个元素。所以我们将它的宽度调整为 4 个元素的宽度，即 800px。您可以根据需要继续缩小或扩大规模。

这是我的 jsFiddle:http://jsfiddle.net/NzTPr/

HTML

<div class="container">
     <div class="block">
          content
     </div>
     <div class="block">
          content
     </div>
     <div class="block">
          content
     </div>
     <div class="block">
          content
     </div>
     <div class="block">
          content
     </div>
</div>

CSS

.container {
     width: 1000px;
     margin: 0 auto;
}
.block {
     width: 190px;
     margin: 5px;
     background-color: green;
     float: left;
     color: white;
}

     @media screen and (max-width: 959px) {  
          .container {
               width: 800px;
          }
     }
     @media screen and (max-width: 759px) {  
          .container {
               width: 600px;
          }
     }
     @media screen and (max-width: 559px) {  
          .container {
               width: 400px;
          }
     }