中心浮動的div項目

我：中心浮動的div項目

#content { width: 100%;text-align:center; } 
.item { float:left;}

然後

...

<div id="content"> 
    <div class="item"><img /><br />wordsn</div> 
    <div class="item"><img /><br />stuff</div> 
    <div class="item"><img /><br />asdasdasdn</div> 
    <div class="item"><img /><br />Dhdfrhwon</div> 
    <div class="item"><img /><br />sewfafdion</div> 
</div>

...

我想中心這些圖像在div項目，並讓它們漂浮在彼此旁邊，並將它包裹得很好。不工作。

我已經嘗試了一切，它在IE中工作，並在Firefox中斷，所以我砍了一些更多的廢話，然後它在IE瀏覽器中斷。我是PHP需要CSS。

來源

2010-06-18 Mohamed Ikal Al-Jabir

.item { width: 400px; margin: auto 0; }

您需要指定一個寬度，以便它可以計算出適當的邊距。

來源

2010-06-18 21:03:32 Aren

這隻適用於固定寬度。通常不切實際。 – 2010-06-18 21:10:21

這個幾乎可以工作但在IE中破壞 – 2010-06-18 21:10:31

你還漂浮着嗎？它應該在I.E中正常工作。 – Aren 2010-06-18 21:15:31

擺脫float並開始使用display: inline作爲item divs。

然後你可以給content a text-align: center - 應該工作。

順便說一下，在語義上，這樣的結構可能會更好地工作 - 當然取決於這些div代表什麼。

<ul id="content"> 
    <li><img />wordsn</li> 
    <li><img />stuff</li> 
    <li><img />asdasdasdn</li> 
    <li><img />Dhdfrhwon</li> 
    <li><img />sewfafdion</li> 
</ul>

來源

2010-06-18 21:04:18

這個解決方案即使看起來應該也不行。我嘗試了內聯塊（這更接近需要的內容），以及哪些IE不起作用。這是一個非常棘手的問題，我嘗試了很多事情。 – 2010-06-18 21:08:18

@穆罕默德然後我完全不明白你的問題 - 我使用這種方法，並且它工作正常。什麼不工作？ – 2010-06-18 21:10:04

我想每行只有很多隻給1或不居中取決於我如何混淆 – 2010-06-18 21:11:49

這是你試圖實現的東西嗎？（您將需要調整頁面大小，看看包裹效果）

djgdesign.co.uk

來源

2010-06-18 21:05:48 vimist

這些對齊左邊 – 2010-06-18 21:07:49

對不起，沒有正確閱讀你的問題的部分 – vimist 2010-06-18 21:28:21

好吧，這是我得到了在所有瀏覽器的工作：

#content { 
text-align:center; 
} 

.item { 
    display: -moz-inline-box; 
    display:inline-block; 
} 

* html .item { display:inline; } /* for IE 6? */ 
* + html .item { display:inline; } /* for IE 7? */

編輯：寬度不需要

來源

2010-06-18 21:17:02

我仍然認爲這可以解決所有瀏覽器使用簡單的'display：inline' - 如果項目不必有一個固定的寬度。但是，如果這在所有瀏覽器中都適合你，那就好！ – 2010-06-18 21:20:09

等待，IE6需要的寬度。該死的。 – 2010-06-18 21:21:31

#content .item{width:200px;margin:0 auto}

來源

2010-06-18 22:18:36 quinti

中心浮動的div項目

回答

相關問題