用css創建座位圖

Question

我想用css創建座位圖。作爲一個盒子，我使用了本教程的css文件http://net.tutsplus.com/tutorials/html-css-techniques/create-a-document-icon-with-css3/。

首先，當我嘗試添加第二個框在同一行，它會跳行， 後來我改變框的CSS有以下幾點：

.docIcon { 
    background: #15cd2f; 

    background: -webkit-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 
    background: -moz-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 
    background: -o-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 
    background: -ms-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 
    background: linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 

    border: 1px solid #ccc; 
    display: block; 
    width: 26px; 
    height: 50px; 

    float:left; 
    text-align:center; 
} 

但隨後的問題是，我需要排的中心而不是站在左邊。

我該怎麼做？

謝謝。

Answer 1

.docIcon {display: inline-block;} 

然後換你的箱子在居中且具有text-align: center

Answer 2

DA容器是正確的.... 在這裏看到這個http://jsfiddle.net/jzjVT/3/ 如果這是你正在嘗試做..