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

Question

我正在创建一个砌体风格的页面布局，并且我试图找到一种在页面不是全尺寸时使瓷砖居中的方法。我现在拥有的是这样的：

| [ 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 ]                       |

我已经尝试按照之前帖子中的建议使用 inline-block ，但这在这里不起作用，可能是由于“Tile's”被浮动。有解决办法吗？

谢谢你

Answer 1

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

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

这是我的 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;
          }
     }

Answer 2

要在父元素上使用inline-blockwith text-align: center，您需要删除该float属性。

但是，您会发现它inline-block可以满足您的float用途 - 所以您根本不会错过浮动。

这是一个非常基本的示例：http: //jsfiddle.net/ppsHy/