浮動變量中心的DIV數

我定義了兩個將背景設置爲圖像的CSS類（如下所示）。一個是黃色塊，另一個是灰色塊。浮動變量中心的DIV數

.block-gray { background: url('grey.gif'); width: 15px; height: 3px; }

alt text

.block-yellow { background: url('yellow.gif'); width: 15px; height: 3px; }

alt text

我希望能夠做的就是定義的DIV可變數字的使用上面的類之一，和水平讓他們堆疊，並集中在一個更大的容器內。

所以，如果我定義了3塊，像這樣：

<div> 
    <!-- The # of these is variable, and not necessarily fixed at 3 --> 
    <div class="block-yellow"></div> 
    <div class="block-yellow"></div> 
    <div class="block-grey"></div> 
<div>

那麼我想他們到外專區內居中，無論有多少內部的div有。我可以使用float：left來水平堆疊它們，但我不確定如何將它們保持居中。

| alt text |

任何想法？

謝謝。

來源

2010-10-15 Steve

.container { text-align: center; } 
.block-yellow { display: inline-block; }

，你可能想要重置的text-align：

.block-yellow { text-align: left; }

來源

2010-10-15 16:24:17

謝謝！工作完美。 – Steve 2010-10-15 16:26:16

請注意在IE <8中'inline-block'具有[有限支持]（http://www.quirksmode.org/css/display.html）。 – 2010-10-15 23:57:11

好吧，不要用float：left;相反，使用顯示：塊，並設置外層div文本對齊：中心

來源

2010-10-15 16:19:21 jargalan

謝謝，但如何將顯示：塊允許divs水平流動？ – Steve 2010-10-15 16:22:36

它不會;你需要「display：inline-block」（請參閱我的回答） – 2010-10-15 16:24:48

浮動變量中心的DIV數

回答

相關問題