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，如之前的帖子所示，但这并不适用于此，可能是因为＆＃34; Tile＆＃34;被漂浮。有解决方案吗？

谢谢

Answer 1

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

但是，您会发现inline-block正在使用float执行的操作 - 因此您根本不会错过浮动。

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

Answer 2

以下是使用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;
          }
     }

如何居中对齐div没有设定的宽度

2 个答案: