CODEWITHSUNDEEP
htmlcss
Steve
Steve

Reputation: 55605

Floating Variable Number of DIVs to the Center

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

alt text 

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

alt text

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.

|     alt text alt text alt text     |

Any ideas?

Thanks.

Upvotes: 1

Views: 524

Answers (2)

Bobby Jack
Bobby Jack

Reputation: 16018

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

and you might want to reset that text-align:

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

Upvotes: 5

jargalan
jargalan

Reputation: 5194

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

Upvotes: 0

Related Questions