•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 402,001 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,424 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 8506 | Replies: 15
 |
•
•
Join Date: Sep 2006
Location: Broken Arrow, OK
Posts: 31
Reputation: 
Rep Power: 3
Solved Threads: 0
Light Poster
Align floated images in center of page with CSS 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!
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
Location: Sofia, Bulgaria
Posts: 135
Reputation:
Rep Power: 2
Solved Threads: 7
Junior Poster
•
•
•
•
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
I miss my mind the most...."
Mark Twain
•
•
Join Date: Sep 2006
Location: Broken Arrow, OK
Posts: 31
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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!
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 8:12 pm.
•
•
Join Date: Oct 2006
Location: Sofia, Bulgaria
Posts: 135
Reputation:
Rep Power: 2
Solved Threads: 7
Junior Poster
•
•
•
•
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;"> <!-- 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
" Of all the things I've lost,
I miss my mind the most...."
Mark Twain
I miss my mind the most...."
Mark Twain
•
•
Join Date: Sep 2006
Location: Broken Arrow, OK
Posts: 31
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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!
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
Location: Sofia, Bulgaria
Posts: 135
Reputation:
Rep Power: 2
Solved Threads: 7
Junior Poster
•
•
•
•
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
I miss my mind the most...."
Mark Twain
•
•
Join Date: Sep 2006
Location: Broken Arrow, OK
Posts: 31
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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!
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: 2,537
Reputation:
Rep Power: 7
Solved Threads: 109
Put these styles in:
For each image to be centered, use:
.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>
Daylight-saving time uses more gasoline
•
•
Join Date: Sep 2006
Location: Broken Arrow, OK
Posts: 31
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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!
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!
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Previous Thread: a href and marker problems
- Next Thread: New Window in CSS (strict doctype)
