HTML and CSS

Align floated images in center of page with CSS

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2006

Posts: 31

Reputation: okparrothead is an unknown quantity at this point

Solved Threads: 0

okparrothead okparrothead is offline

Offline

Light Poster

Align floated images in center of page with CSS

Mar 7th, 2007

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!

•

Join Date: Oct 2006

Posts: 232

Reputation: Rhyan is an unknown quantity at this point

Solved Threads: 24

Rhyan

Offline

Posting Whiz in Training

Re: Align floated images in center of page with CSS

Mar 7th, 2007

•

Originally Posted by 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!

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

" Of all the things I've lost,
I miss my mind the most...."
Mark Twain

•

Join Date: Sep 2006

Posts: 31

Reputation: okparrothead is an unknown quantity at this point

Solved Threads: 0

okparrothead okparrothead is offline

Offline

Light Poster

Re: Align floated images in center of page with CSS

Mar 7th, 2007

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!

Last edited by okparrothead; Mar 7th, 2007 at 9:12 pm.

•

Join Date: Oct 2006

Posts: 232

Reputation: Rhyan is an unknown quantity at this point

Solved Threads: 24

Rhyan

Offline

Posting Whiz in Training

Re: Align floated images in center of page with CSS

Mar 8th, 2007

•

Originally Posted by 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!

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

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

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

" Of all the things I've lost,
I miss my mind the most...."
Mark Twain

•

Join Date: Sep 2006

Posts: 31

Reputation: okparrothead is an unknown quantity at this point

Solved Threads: 0

okparrothead okparrothead is offline

Offline

Light Poster

Re: Align floated images in center of page with CSS

Mar 8th, 2007

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!

•

Join Date: Oct 2006

Posts: 232

Reputation: Rhyan is an unknown quantity at this point

Solved Threads: 24

Rhyan

Offline

Posting Whiz in Training

Re: Align floated images in center of page with CSS

Mar 8th, 2007

•

Originally Posted by 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!

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.

" Of all the things I've lost,
I miss my mind the most...."
Mark Twain

•

Join Date: Sep 2006

Posts: 31

Reputation: okparrothead is an unknown quantity at this point

Solved Threads: 0

okparrothead okparrothead is offline

Offline

Light Poster

Re: Align floated images in center of page with CSS

Mar 8th, 2007

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!

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: Align floated images in center of page with CSS

Mar 8th, 2007

Put these styles in:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

For each image to be centered, use:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div class="cenimg">
<img src="(put url here)" class="imgcen" />
<p>Your caption here</p>
</div>
<div class="cenimg">
<img src="(put url here)" class="imgcen" />
<p>Your caption here</p>
</div>

Daylight-saving time uses more gasoline

•

Join Date: Sep 2006

Posts: 31

Reputation: okparrothead is an unknown quantity at this point

Solved Threads: 0

okparrothead okparrothead is offline

Offline

Light Poster

Re: Align floated images in center of page with CSS

Mar 15th, 2007

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!