浮动变量中心的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数

回答

相关问题