block element to act inline

[johnallan]

I have a series of divs which I want to work similar to images in that they can be centered within another div. As more are added they fill in the parent div from the center and expand to additional lines as needed.

Each div has a layout inside it consisting of an image, text and a background image.

<div class="tea">
<img src="../_images/tea/types/yuki_sencha.jpg" alt="" />
<p>yuki sencha</p>
</div>

Is this clear?

It would appear on screen the same way this would

<div style="text-align:center; width: 400px;">
<img src="blank.gif">
<img src="blank.gif">
<img src="blank.gif">
</div>

 

[Vragabond]

AFAIK that cannot be done. The only way to stack up divs in one row is to float them, because divs are block level elements and unless floated appear one below the other. If you float them, you automatically lose all attempts to center them, as floating must be done to the right or left side. However, it all depends on how predictable your page will be. Say that divs holding images are always 100px wide. Add some margins (10px altogether) and you will have a known width of 110px. If you want to stack up three divs next to each other, you know you need a 330px container. If you center that container via margin: 0 auto; and a specified width (of 330px in this case) you will be get the result of three centered div boxes with images.