Align floated images in center of page with CSS

[okparrothead]

Hello CSS Experts,

As far as I can tell, what I want to do can't be done.

Ihave a gallery page that is liquid in width.

Instead of liquid widths of thumbnails, when the page is narrow, I'm planning on two columns (or one) of images, but when the page is wide, three columns (or four).

The thumbs are in divs that are floated left to get them to sit in rows.

So far everything works as planned.

Now, is there any way to center the floated images in the page?

In other words, if the page is wide enough for 3 1/2 thumbnails, is there a way to put them in the center of the page rather than floated all the way left?

I considered an additional div to capture all the thumbs and center it, but then it would have to have a defined width which sometimes may be too wide.

Thanks for ayn help you can give me!

Hello CSS Experts,

As far as I can tell, what I want to do can't be done.

Ihave a gallery page that is liquid in width.

Instead of liquid widths of thumbnails, when the page is narrow, I'm planning on two columns (or one) of images, but when the page is wide, three columns (or four).

The thumbs are in divs that are floated left to get them to sit in rows.

So far everything works as planned.

Now, is there any way to center the floated images in the page?

In other words, if the page is wide enough for 3 1/2 thumbnails, is there a way to put them in the center of the page rather than floated all the way left?

I considered an additional div to capture all the thumbs and center it, but then it would have to have a defined width which sometimes may be too wide.

Thanks for ayn help you can give me!

Hmm ... an interesting question you have!

As far as I understand, you have a <DIV> for each let's say 3 horizontally floated images, is that correct?
So, if you have 9 images on the page, you show them in 3 DIVs horizontally. Something like this:
<div id=1>
<img float1.1 />
<img float1.2 />
<img float1.3 />
</div>
<div id = 2>
<img float2.1>
<img float2.2>
<img float2.3>
</div>
<div id = 3>
<img float3.1>
<img float3.2>
<img float3.3>
</div>

In order to achieve what you want, you have 2 options:

1. Get all three divs into an overall div like this
<div id = overall>
<div id=1>...</div>
<div id=2>...</div>
<div id=3>...</div>
</div>
Then add the following style to your overall div:
#overall {
text-align: center;
margin: 0 auto;
padding: 0;
}
this should do the trick.
OR
2. You can make the following: - instead of floating the images inside the divs - float the divs and present the thumbs vertically. The code should be like this:
<div id=1 style="float: left; text-align: center; margin: 0 auto; width=25%">
<img 1 />
<img 2 />
<img 3 />
</div>
<div id = 2 style="float: left; text-align: center; margin: 0 auto; width=25%">
<img 4>
<img 5>
<img 6>
</div>
<div id = 3 style="float: left; text-align: center; margin: 0 auto; width=25%">
<img 7>
<img 8>
<img 9>
</div>

Hope it works - didn't try it before posting, but seems like it ;) If it doesn't work, share your code, I'll try to fix it...
Good luck

[okparrothead]

Hi Rhyan,
Sorry I didn't explain myself very well.

Actually, what I have is this:

<div>
<img>
<caption>
</div>

<div>
<img>
<caption>
</div>

etc.

etc.

with the divs defined as the same height and width, floated left so they'll sit in rows.

My page is liquid in width, with defined columns at left and right, so the part that's liquid is the center column.

When the viewport is 1024px wide, there could be three or four thumbs across, depending on the size of the thumbs.

If the viewport is 800px wide, the row could be maybe two or three thumbs across. If it's something narrower or wider, there will be as many as will fit.

What I want to achieve is the centering of the thumbs if the width of the viewport leaves enough room for more than 2 but less than 3, or more than 3, but less than 4, etc.

Right now, everyting works great, but when there's extra width, there's too much air on the right.

I don't think it can be done with CSS, but I thought I would ask.

That is, unless you can think of something...

Thanks for all your help in any case!

Hi Rhyan,
Sorry I didn't explain myself very well.

Actually, what I have is this:

<div>
<img>
<caption>
</div>

<div>
<img>
<caption>
</div>

etc.

etc.

with the divs defined as the same height and width, floated left so they'll sit in rows.

My page is liquid in width, with defined columns at left and right, so the part that's liquid is the center column.

When the viewport is 1024px wide, there could be three or four thumbs across, depending on the size of the thumbs.

If the viewport is 800px wide, the row could be maybe two or three thumbs across. If it's something narrower or wider, there will be as many as will fit.

What I want to achieve is the centering of the thumbs if the width of the viewport leaves enough room for more than 2 but less than 3, or more than 3, but less than 4, etc.

Right now, everyting works great, but when there's extra width, there's too much air on the right.

I don't think it can be done with CSS, but I thought I would ask.

That is, unless you can think of something...

Thanks for all your help in any case!

Oh I see...
Well, in my opinion the problem is because you use div's to wrap the images together with the caption. Besides, why do you use the caption element - this is a table element, so if you don't have a table with your image and you want to show the text - e.g. image No.xxx - there is no need to use the caption - just use <span>.

Now - the divs are block elements, that is why you made them float left, in order to make them fit in the liquid part. Better do it like this :

<div id='liquid_holder' style="text-align: center; margin: 0 auto;"> <!-- this will be the liquid part. -->
<!-- here go all your divs with images -->
<div class='thumb'>
<img 1 />
<caption></caption>
</div>
<div class='thumb'>
<img 2 />
<caption></caption>
</div>
<div class='thumb'>
<img 3 />
<caption></caption>
</div>

</div><!-- here we close the liquid div -->

Now - all you need to do is make the div display as inline elements, not blocks like this:

.thumb {
display: inline;
margin: 0 auto; /*or whatever you want*/
padding: 0; /*or whatever you want*/
}
Now, as an in-line element the div gets as wide as the image, and due to the fact tihs is an in-line element, you do not need to float it any more, as inline elements are afloat by default - that is - they move if there is no enough space to fit.

Hope it works

[okparrothead]

Thank You Rhyan,

Your help is much appreciated.

I think (Hmmm. Maybe.) I see how this will work. By going inline with the divs, they don't have to float left. By wrapping them in a div that is auto centered, they bounce to the center.
I'll give this a whirl and see what happens.

As for using <caption>, I was identifying the text as a caption for search engines, as opposed to a heading or a paragraph. Is this not needed?

Thanks again!

Thank You Rhyan,

Your help is much appreciated.

I think (Hmmm. Maybe.) I see how this will work. By going inline with the divs, they don't have to float left. By wrapping them in a div that is auto centered, they bounce to the center.
I'll give this a whirl and see what happens.

As for using <caption>, I was identifying the text as a caption for search engines, as opposed to a heading or a paragraph. Is this not needed?

Thanks again!

Hmm... I am not sure. I think that this trick is good for crawlers to get info, but I am not sure it will validate corectly as a valid code. Here is a description of the capture element.

http://www.w3schools.com/tags/tag_caption.asp

Good luck.

[okparrothead]

Thanks Rhyan,
After reading your link I understand caption better. I was using it for a photo caption.

Yet another newbie mistake! Doh!

Thanks for everything!

[MidiMagic]

Put these styles in:

.cenimg {text-align: center;
         margin-top: 0px;
         margin-bottom: 0px;
         padding: 0px;}

.imgcen {clear: both;}

For each image to be centered, use:

<div class="cenimg">
<img src="(put url here)" class="imgcen" />
<p>Your caption here</p>
</div>

[okparrothead]

Hi all,

I didn't abandon my post, I just got sidetracked. Thanks for hanging in there with me.

Rhyan, your suggestion worked! Unfortunately I had to ditch the image cations. Whenever I added anything more than the img itself, I got a vertical column 1 image wide. It was centered, but only one column.

Thanks for everything!

Did you fix it? Can you show us some result and do you need extra help?

[MidiMagic]

CSS and div is a half-baked system of page layout. You have very little control over it. The only way I can think of to do this is nesting some divs, each with different properties and widths.

This is a place where tables are better. The table is not deprecated. They just don't want us to use them to create padding, borders, and margins.

My rule:

1. If you want something fluid, which changes its arrangement when you resize the browser or change screen resolution, use div.

2. If you want a stable structure which keeps its shape, use table.

[rgtaylor]

div gives great control over layout, fixed or otherwise, only people who don't really spend the time to learn to use it right promote the use of tables for layout...

I am not sure that the above suggestion to inline the div tags will work as expected, some browsers, newer IE versions to be specific will ONLY allow inline to be applied to elements which are naturally inline elements...I know, that seems stupidly redundant.... But it is for people who may have switched an inline element to block in a page level CSS, but then wish to return that to inline in an element level CSS...

They obviously were smokin' somethin' when they made that decision....

But we live with it...

I have recently made a page that uses images for buttons. The buttons are centered in the area, and inline next to each other... honestly it was quite tricky getting it to work... I don't like the way I finally got it, I thought of better ways later, but never made the change to that menu...

You can use javascript to dynamically position your divs...

decide how many images you want across the page, or how much space to allot to each image...either way...

use document.body.clientHeight and document.body.clientWidth to find the "ACTUAL" space available in the browser window... then position the images via math... you can use JS to get an enumeration of all div tags and set each one in a loop, or use classes, id, name etc. to sort it out...

use "position: absolute;" then set top and left using the calculated values from CSS.. .

With a little effort and creativity you can place each image exactly where you want it...

put all this in a JS function which is called by onLoad in the body tag... if you use css classes for layout control you could do the calculations earlier... make the images hidden, so they don't show until the positioning is finished, so the page loading looks better...

use onResize in the body tag to recalculate the positions if the user resizes the window after loading... some older browsers won't redraw the page once it is rendered fully, but I don't know anyone who still has an browser that old...so don't worry about it...

I have this working in a slightly different example and it is tested on Opera, Firefox and IE and yields 100% the same results in all 3...

Contact me directly if you want some direct guidance on this... I have a PDF aritcle I wrote detailing the methods to use...

[okparrothead]

Thanks RG,

Yes, it seems counter intuitive to assign inline attributes to a block item.

What I'm trying to achieve is divs in rows where the width of the container and the number of divs in a row are unknown.

I have a fluid width page design, and floating the blocks left made them line up in rows, but when the width was more than 3, but less than 4 in a row the divs all floated left, and there was too much air to the right.

The technique described by Rhyan brought them to the center of the page though without captions -- success! (of a sort)

I've almost got the page completed and will post the results here when I do.

[rgtaylor]

I don't understand why you don't have captions... the div that contains the image should set text-align: center then after the image, if you want the caption below, place <br/><span>your Caption</span> with any text formatting your captions needs in the span tag... That should end up like this

<div style="text-align: center;">
<img src="xxx.jpg" alt="xxx"/><br/>
<span style="font-weight: 600;">XXX in Red</span>
</div>

or something like that... it should keep the relevant text WITH the image, centered under the image...
move the <span> tags and the <br/> tag to before the <img> tag if you want the caption above the image... <div><span></span><br/><img/></div>
by embeding <div> tags as Rhyan suggested this should be relatively easy, BUT as I mentioned, some browsers will have trouble with inlining block elements... and you will end up with 1 image per row... so test thoroughly...

good luck

[MidiMagic]

The problem is that, if the browser window isn't wide enough to hold all of the divs, the format will fall apart. Different browsers make it fall apart in different ways here.

IE stacks the images on top of each other vertically in a single-file column.

Firefox overlaps the images, hiding parts of them behind other images.

Netscape puts a horizontal scroll bar on the screen.

With tables, all three browsers add the scroll bar when the format doesn't fit.

The real problem is that the W3C deprecators are thinking of the newspaper format, and don't expect anyone to be publishing anything other than a newspaper. So they took out everything that isn't compatible with newspaper format.

[rgtaylor]

I have a div system like these that embeds multiple divs inside a parent div... infact I have entire sites that are built using multiple levels of embeded div tags... these all display just the same on IE & FF & Opera.. has anyone got a simple abreviation for Opera... Anyway, to get things working just right for your particular uses you must play with it a bit...

I don't know about the newspaper comment, since the use of columned layouts in CSS is a problem many people are having, in fact it is the main reason people turn to tables... and Image wrapping of text is common in newspapers too...

I think the real probably is that the standards are not enforcable in anyway... MS can continue to invest more time and effort in breaking the standard than they do in compliance... Also, remember that MS, among others, is on the standards board... they KNOW what it is supposed to do, it isn't about differences in interpretation... like when Bill Clinton said, "I guess it depends on what your definition of the word 'is' is."... They just think that we are stupid enough to not understand... Since the general public don't deal with the problems caused by MS, they continue to use the browser despite that crap... MS counts on this to bully the owrld into doing things "their" way...

Newspaper layout is what makes people designing for the web a problem... the people in Japan, where I live, want to pack as much on the screen as they can... like a newspaper where each page costs money... and they want to control the layout with pixel perfect clarity... BUT this doesn't work since each monitor will have its own resolution, each platform has a standard resolution and each desktop size setting has a resolution... the cobination of these factors means that few computers will have the same resolution, even if they were all set to 800x600 it wouldn't be the same... So graphic designers who design for print media can not use the same skills to design for the web.... but they are trying...

They also charge per page so the customers go along with reduction of pages by packing content... But only 7% of the page typically is perceived by the reader... The less you put, the more that is perceived... the more you put the less that is perceived... Google is a perfect page, and Yahoo sucks.... from a layout point of view...

Put the blame where it belongs, on the web designers and MS... not on the people who are trying their best to make us all "just get along"... ;-)

Peace,