Centering images with titles under and float left

little photoalbum css

[Zillion]

With the following css

#container {
 width: 800px; /* widht */
 overflow: auto; /* clear floats */
 border: 2px solid red;
 }
 .picture-box {
 float: left;
 border: 2px solid red; 
 }

and html

<div id="container">
 <div class="picture-box">
 <img src="foto.gif" style="width:200px;height:200px;">
 <p>Title 1</p>
 </div>
 
 <div class="picture-box">
 <img src="foto.gif" style="width:300px;height:200px;">
 <p>Title 2</p>
 </div>
 
 <div class="picture-box">
 <img src="foto.gif" style="width:200px;height:200px;">
 <p>Title 3</p>
 </div>
 
 <div class="picture-box">
 <img src="foto.gif" style="width:250px;height:200px;">
 <p>Title 4</p>
 </div>
</div> 

Now how can I center the content? I tried various options like

text-align:center
margin-left: auto
margin-right: auto

but the content just aligns left.

tx

[edited by: DrDoc at 6:27 pm (utc) on April 1, 2006]
[edit reason] Removed personal URL. Refer to TOS and forum charter for more information. [/edit]

[robhon]

This should centre the whole page is that's what your after?

#container {
width: 800px; /* widht */
overflow: auto; /* clear floats */
border: 2px solid red;
margin: auto
}

[saucey]

I don't think that's what he wants (i could be wrong of course)... it still doesn't center the text beneath the picture (at least not in FF) which is what I think he wants.

I think your problem is coming from the fact that you have not defined the width of .picture-box. It might be better if your images were in the same general width range, all between 200px and 250px for example. Then you could set your width of your .picture-box to something that you know will work, say 260px.

Then the text-align:center should work as you want it to.

.picture-box {
float: left;
width:260px;
text-align:center;
border: 2px solid red;
}

[Zillion]

The idea of this css is to fill a container with pics of different sizes and under the pic a title until it reaches the end of that container width and then goes to newline.

The margin auto doesnt seem to have an impact.

tx

[edited by: DrDoc at 6:28 pm (utc) on April 1, 2006]
[edit reason] Removed personal URL. Refer to TOS and forum charter for more information. [/edit]

[DrDoc]

It won't work, since your containers are floated left.

You cannot specify left floating and combine that with centering. It's one or the other. The two are incompatible, just like making a text both 12 and 16 pixels in size would be.

You may have to rethink the situation. Either settle for left alignment, or start thinking about wrapping elements. But, that would require you determining beforehand which photos reside on the first line, and which on the second. It will not work with the automatic wrapping which left floating provides.