如何將中心網格對齊

Question

我已經設置了一個網格佈局，可以在縮小頁面大小時響應並堆疊。

但是，我該如何居中三個div？你會注意到，在全面擴張時，他們偏離了中心。

http://www.naturettl.com/shop/

謝謝。

Answer 1

你可以用很多方法做到這一點，這些方法之一是display:inline：

div.Box { 
    width: 20%; 
    height: 250px; 
    background: red; 
    display: inline-block; 
} 

#Container { 
    text-align: center; 
} 

JSFiddle（這與percent寬度）

JSFiddle（這與px寬度）

div.Box { 
    width: 200px; 
    height: 250px; 
    background: red; 
    display: inline-block; 
} 

另一種方法是製作div.Box float: left;然後給父母一個固定的width然後加上margin: auto使其居中。

JSFiddle

div.Box { 
    width: 200px; 
    height: 250px; 
    background: red; 
    float: left; 
    margin: 0 5px 0 5px; 
} 

，但如果你想讓它響應你應該寫一些media查詢其他分辨率。