水平流動的項目在容器中心對齊

我的困境是這樣的（應該很簡單，我懷疑）：我有一個容器和一組項目（都是div）。下面的CSS適用：水平流動的項目在容器中心對齊

.container { 
    float:   left; 
    width:   100%; 
} 


.item { 
    margin:   32px; 
    text-align:  center; 
    position:  relative; 
    float:   left; 
}

的.item本身是可以有幾乎任何一組任意元素的容器，但他們需要中心這裏面對齊（在我的情況，它通常包含縮略圖以及下面的文字小標題）。雖然上面的CSS允許每個.item以我喜歡的方式水平流動，但我無法弄清楚如何使整個集合中心對齊（而不是像現在這樣從左向右流動）。

來源

2011-01-12 Hamster

爲什麼當你將寬度設置爲100％並顯示阻止時浮動div？ – Shahid 2011-01-12 19:40:30

我相信，塊顯示實際上是多餘的，因爲它們是divs。不完全確定我明白爲什麼它仍然以這種方式工作，儘管... – Hamster 2011-01-12 20:16:29

編輯
變化.item { display: block; }到.item { display: inline-block; }，帶走.item { float:left; }並添加text-align: center;到.container

你可以在這裏看到：http://jsfiddle.net/JMC_Creative/RQrRb/

你也可以把一個.inner DIV與width:75%; margin: 0 auto;，然後把你的.item s在那，如果你正在尋找有一些側面的空間。

來源

2011-01-12 19:31:58 JakeParis

@Hamster：檢查編輯 – JakeParis 2011-01-12 19:37:47

你會想從Mozilla看這篇教程。它可以通過中心只設置父容器對準text-align:center;

Cross Browser Inline Block

來源

2011-01-12 19:39:30 sholsinger

.container {
width: 100%;
}

.item {
margin: 32px;
text-align: center;
}

來源

2011-01-12 19:50:44 Shahid

水平流動的項目在容器中心對齊

回答

相關問題