Floating Variable Number of DIVs to the Center

Question

I defined two CSS classes that set the background to an image (shown below). One is a yellow block, and another is a grey block.

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

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

---

What I want to be able to do is to define a variable number of div's using one of the classes above, and have them horizontally stacked, and centered within a larger container.

So if I defined 3 blocks like so:

<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>

Then I would like them to be centered within the outer div, no matter how many inner divs there are. I can use float:left to stack them horizontally, but I'm not sure how to keep them centered.

|           |

Any ideas?

Thanks.

Answer 1

well, don't use float:left; instead, use display:block and set the outer div as text-align:center

Answer 2

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

and you might want to reset that text-align:

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