向中心浮动可变数量的DIV

Question

我定义了两个CSS类,它们将背景设置为图像(如下所示).一个是黄色块,另一个是灰色块.

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

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

---

我想要做的是使用上面的一个类定义一个可变数量的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中居中,无论有多少内部div.我可以使用float:left将它们水平堆叠,但我不确定如何让它们居中.

|           |

有任何想法吗？

谢谢.

Answer 1

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

并且您可能想要重置该text-align:

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