如何中心對齊div沒有設置寬度

我創建了一個Masonry風格的頁面佈局，我試圖找到一種在頁面不是全尺寸時居中對齊瓷磚的方法。我目前所面對的是這樣的：如何中心對齊div沒有設置寬度

| [ 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的在以前的文章建議嘗試，但這並不在這裏工作，也許是由於「瓷磚的」浮動。有解決方案嗎？

謝謝

來源

2013-07-04 user2516546

下面是一個使用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; 
      } 
    }

來源

2013-07-04 22:50:56 hungerstar

謝謝。我希望將@media用於本網站的其他部分，這真的幫助我更好地理解它。我的問題現在也分類。再次感謝！ – user2516546

要與text-align: center父元素上使用inline-block，你將需要刪除float財產。

但是，你會發現inline-block做你正在使用的float - 所以你不會錯過任何浮動。

這是一個非常簡單的例子：http://jsfiddle.net/ppsHy/

來源

2013-07-04 21:40:45 Fenton

如何中心對齊div沒有設置寬度

回答

相關問題