Centering floated things, How to get css (or something) to center floated elements Options

[Ephraim F. Moya]

Does anyone know how to center floated elements after they've been floated?

I know this doesn't make much sense but take a look at one of the album indexes on my site's Photo section and see what I mean. http://174.64.56.193/ in the PHOTOS project. With CSS i'm able to fit sort of random width photos into a div. But the last row, if its short, is also left aligned.

I want all the rows centered.

EFM

This post has been edited by Ephraim F. Moya: Jul 11 2010, 10:31 AM

[pandy]

You mean like this page?
http://174.56.64.193/Photos/?act=alb&al=8

[Ephraim F. Moya]

You mean like this page?
http://174.56.64.193/Photos/?act=alb&al=8

Yes.
But if you look at the last line the photo is stuck left. That's the line I'd like centered. Look at this page at the bottom: http://174.56.64.193/Photos/?act=alb&al=1 . Those panoramas I'd like centered.

Thanks
EFM

This post has been edited by Ephraim F. Moya: Jul 11 2010, 11:18 AM

[pandy]

Can't think of a way, not with everything floated like that.

But since it's fixed with anyway and the images seem to be sized to fit three in a row, couldn't you group them three by three and center them? I.e. no floats, just centering and margins.

[Ephraim F. Moya]

Can't think of a way, not with everything floated like that.

But since it's fixed with anyway and the images seem to be sized to fit three in a row, couldn't you group them three by three and center them? I.e. no floats, just centering and margins.

The style for the width is min-width. It can get larger if the photo pushes it. Then I wanted fewer per line with the whole line centered. I could do it easily with a table. Also, divs can contain divs. I used to do it with a p holding the images only but I decided to add the caption which complicated things. Again, a table with the caption in another row would solve the problem -- but NOOOO.

Thanks,


This post has been edited by Ephraim F. Moya: Jul 11 2010, 02:09 PM

[pandy]

Wouldn't the single image be in the left cell all alone in a table?

[Ephraim F. Moya]

Wouldn't the single image be in the left cell all alone in a table?

I used to do:

<p style=center><img...><img...><img...></p>

and that did what I want since the images are inline and they're all the same height.

Then I decided to add a caption to each image.

With tables:
<p style=center><table><tr><td><img...></td></tr><tr><td>caption</td></tr></table><table etc></p>
I haven't tried this but I think it might work. But its not strict. I might be able to use a div??

Without tables:
<div>
<div float:left>
<div min-width:33.3%>
<div text-align:center><img...></div>
<div text-align:center>caption</div>
</div>
etc
</div>
<div clear:both></div>
</div>

[Christian J]

You might use "display: inline-block" like this:

CODE

div {border: 1px solid #000;}

#container {
float: left;
width: 320px;
text-align: center;
}
#container span {display: inline-block;}
#container span img {display: block;}


<div id="container">

<span>
<img src="dog.jpg" width="100" height="50" alt="">
caption
</span>

</div>

IE6/7 only support "display: inline-block" when applied on inline elements (hence the SPANs). According to IETester the above even works in IE5.5, which sounds too good to be true (IETester bug?).

[Ephraim F. Moya]

Christian,

By golly! You've done it! It works. Take a look. http://174.56.64.193/

I'm working on it now to determine the stability. But it looks good so far.

Thanks,
EFM

[Christian J]

Forgot to say that Firefox 2 and older don't support this...

[pandy]

Yup, in the version of Gecko I looked in the images come one under the other.

There's also this, but from the look if it I think it would still require grouping.
http://www.pmob.co.uk/pob/centred-float.htm

[Christian J]

Yup, in the version of Gecko I looked in the images come one under the other.

People always mention the "display: -moz-inline-box" and similar CSS extensions, but I've never made them work. Any luck for you?

There's also this, but from the look if it I think it would still require grouping.
http://www.pmob.co.uk/pob/centred-float.htm

That page linked to http://www.search-this.com/2008/08/28/lets...ock-in-a-block/ which shows how to make IE6/7 support inline-block even on (default) block elements, excellent!

[Ephraim F. Moya]

In testing Christian's solution above I found that a single line of photos did not center and the whole page did not flow when the width of the page is changed.

By changing the css and mark-up like this I solved both problems. Also note that float: is not required. So the layout works easier.

#container { text-align: center; }
#container span {display: inline-block;}

<div id="container">

 <span>
  <img src="..." height="50" alt=""><br>
  caption
 </span>
:more spans:

</div>

This post has been edited by Ephraim F. Moya: Jul 12 2010, 11:31 AM

[pandy]

People always mention the "display: -moz-inline-box" and similar CSS extensions, but I've never made them work. Any luck for you?

Don't think I've tried.

[Christian J]

In testing Christian's solution above I found that a single line of photos did not center and the whole page did not flow when the width of the page is changed.

By changing the css and mark-up like this I solved both problems. Also note that float: is not required.

True, the width and float make no sense and I should have removed them before posting.

But by making the images "display: block" (like I did) you don't need any BR elements.