水平居中浮動框

我想顯示一些浮動框（包含縮略圖的div），縮略圖的數量取決於當前頁面的寬度。例如：水平居中浮動框

<div class="container"> 
    <div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div> 
    <div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div> 
    <div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div> 
    <div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div> 
    .......... ETC 
</div>

的問題是，對於一個給定的寬度它顯示例如每行4盒，但它們都是左對齊，並有一些白色的空間，以正確的，我怎麼能水平爲中心每一行？？

事情是這樣的：http://realworldstyle.com/thumbs_3.html但箱子在頁面上水平居中...

在此先感謝，

來源

2009-12-04 fidoboy

對不起，但無法做到你想用直接的CSS + HTML。（看看@Pekka的替代方案，但如果縮略圖行不填滿整行，他們會自己居中放在最後一行）

您需要在父對象.container與margin-left: auto和margin-right:auto，你不能這樣做，因爲它是一個流體寬度頁面。

這是我怎麼會去這樣做，但它肯定有一些錯誤，你將需要解決：一個JavaScript事件

綁定到window.resize事件
獲取新的文檔寬度並查看一行中可以放置多少個縮略圖
將div.container的寬度設置爲該寬度加上右邊的一點邊距。這div總是有auto

這是一個margin-left和margin-right將圍繞縮略圖儘可能最佳。根據您的視覺顯示器，您可能需要額外的包裝div來提供100% width背景。

來源

2009-12-04 23:41:27

好吧，認爲這可能是最簡單的解決方案，我雖然我可以解決這隻使用CSS，但似乎我也需要使用JavaScript也... ... – fidoboy 2009-12-04 23:51:22

可以downvoter花時間提供有用的反饋，所以我可以讓我的回答更好？ – 2009-12-04 23:59:12

太棒了！我已經用jQuery的一些幫助解決了它，現在它可以工作...非常感謝dcneiner！ – fidoboy 2009-12-05 00:16:30

我想獲得中心的元素的唯一方法是用浮動不行，但設置圖像display: inline。這樣，您可以使用父容器的text-align屬性隨意對齊它們。

但是，這會給你垂直邊距和設置高度的問題。但據我所知，只要inline-block不被廣泛支持，它是唯一可靠的跨瀏覽器方式。

來源

2009-12-04 23:34:47

我認爲這個問題明確了爲什麼你的修復程序無法工作。 – 2009-12-04 23:36:12

採取點，讀得太快。將編輯。 – 2009-12-04 23:37:45

我編輯了我的問題添加一個例子，以更好的理解... – fidoboy 2009-12-04 23:39:05

使用一個無序列表內聯的列表元素：

HTML：

<ul> 
    <li><img src="image1.jpg" /></li> 
    <li><img src="image2.jpg" /></li> 
    <li><img src="image3.jpg" /></li> 
    <li><img src="image4.jpg" /></li> 
</ul>

CSS：

ul { 
    width: 960px; 
    text-align: center; 
} 

ul li { 
    display: inline; 
}

這就行了，只要你沒有塊級LI元素內的元素。如果你有多行圖像，也可以工作;）你也可以使用div，但是使用列表在語義上更好。

來源

2009-12-04 23:42:02

這是行不通的，因爲你在你的例子中使用了一個固定的（960px）.... – fidoboy 2009-12-04 23:52:15

@fidoboy他的例子工作時不需要寬度，但如果每行有6個項目，並且3在最後。最後3個將居中並且不符合前面的行。 – 2009-12-05 00:00:22

.container中的內聯塊和自動邊距應該爲大多數瀏覽器提供技巧，也許還有text-align：center on body。

如果IE6和IE7不能很好地發揮，你總是可以使用javascript/jquery將整個東西包裝在一張表中。

你要知道，我不敢建議爲正常的瀏覽器表的解決方案，但它顯然是完美的作品;-)

來源

2009-12-05 00:14:27 jeroen

風格保證金：0汽車;將中心元素。但是你需要指定父容器的寬度。

<div style="width:100%; float:left; margin: 0 auto;"> 
    /* Your Child Elements */ 
</div>

來源

2013-11-14 06:07:03

水平居中浮動框

回答

相關問題