Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 24357

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Mar 7th, 2007

Align floated images in center of page with CSS

Expand Post »

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!

okparrothead

Reputation Points: 14

Solved Threads: 0

Light Poster

Offline

31 posts
since Sep 2006

Permalink

Mar 7th, 2007

Re: Align floated images in center of page with CSS

Click to Expand / Collapse Quote 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

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Permalink

Mar 7th, 2007

Re: Align floated images in center of page with CSS

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.

okparrothead

Reputation Points: 14

Solved Threads: 0

Light Poster

Offline

31 posts
since Sep 2006

Permalink

Mar 8th, 2007

Re: Align floated images in center of page with CSS

Click to Expand / Collapse Quote 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

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Permalink

Mar 8th, 2007

Re: Align floated images in center of page with CSS

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!

okparrothead

Reputation Points: 14

Solved Threads: 0

Light Poster

Offline

31 posts
since Sep 2006

Permalink

Mar 8th, 2007

Re: Align floated images in center of page with CSS

Click to Expand / Collapse Quote 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.

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Permalink

Mar 8th, 2007

Re: Align floated images in center of page with CSS

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!

okparrothead

Reputation Points: 14

Solved Threads: 0

Light Poster

Offline

31 posts
since Sep 2006

Permalink

Mar 8th, 2007

Re: Align floated images in center of page with CSS

Put these styles in:

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:

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>

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Mar 15th, 2007

Re: Align floated images in center of page with CSS

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!

okparrothead

Reputation Points: 14

Solved Threads: 0

Light Poster

Offline

31 posts
since Sep 2006

Permalink

Mar 15th, 2007

Re: Align floated images in center of page with CSS

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

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: a href and marker problems

Next Thread in HTML and CSS Forum Timeline: New Window in CSS (strict doctype)

DaniWeb Message

Cancel Changes

User Name
Password