CSS居中瓷磚（可調寬度）

Question

我想創建一個頁面，其中包含任意數量的固定大小的瓷磚，其中每行瓷磚的數量將根據窗口的寬度進行調整。我已經創建了這個功能here。

但是，我希望這些瓷磚在灰色方框內居中。我試圖創建中介#tile-box，我認爲我可以居中並製作可變寬度以匹配它內部的瓷磚，但是我根本無法完成這項工作。

任何關於如何讓瓷磚居中灰色的div的建議？

Answer 1

以及我只能這樣做在你的代碼

#tile-box { 
    border: 1px solid blue; 
    display: table; 
    text-align:center; //i only added this line to your css 
} 

你可以爲你的居中文本做到這一點，還有，你可以提出你的身體在你的HTML很多方面，我希望我幫助你...

Answer 2

居中水平：text-align: center;

Centerign垂直：line-height: 12em;/* Height of the container less the font-size */

結果在這裏在線：http://jsfiddle.net/LHDJj/17/

Answer 3

你最那裏的方式，但你並不真的需要display:table ..

JSfiddle Demo

CSS

#body { 
    width: 50em; 
    max-width: calc(100% - 5em); 
    margin: auto; 
    padding: 2em; 
    margin-bottom: 2em; 
    background-color: #ccc; 
    overflow: auto; 
} 

#tile-box { 
    border: 1px solid blue; 
    text-align: center; 
} 

.tile { 
    width: 5em; 
    height: 5em; 
    background-color: #fff; 
    margin: 1em; 
    padding: 0; 
    display: inline-block; 
    clear: left; 
    vertical-align: top; 
    position: relative; 
    overflow: hidden; 
}