Tue, 2011-02-15 22:26
The page is at http://www.oahure.com/test6.php. I want the photos to be centered.
The reason I want to stay away from fixed width is I want to show the viewer the maximum number of photos possible per row. On my screen that happens to be 5 photos per row. If someone is running 1280 width or lower it would be 3 photos per row.
No matter how many photos show up though I want them centered.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> <!-- .gallery { align:center; background:#fff; width:320px; height:320px; border-style:solid; border-width:1px; border-color:white; text-align:left; float:left; } --> </style> </head> <body> <div class="gallery"><img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /></div> <div class="gallery"><img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /></div> <div class="gallery"><img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /></div> <div class="gallery"><img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /></div> <div class="gallery"><img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /></div> <div class="gallery"><img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /></div> <div class="gallery"><img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /></div> <div class="gallery"><img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /></div> </body> </html>
Tue, 2011-02-15 22:42
#1
Why start a new thread with
Why start a new thread with the same question? Duplicate: http://csscreator.com/topic/there-way-center-these-divs-are-floated-left 
Wed, 2011-02-16 02:28
#2
Because I can't edit the
Because I can't edit the title of the original thread and it is very important to know it is WITHOUT a fixed with DIV, otherwise if it is fixed width it is easy to do and I could even use a table to do it.
If they allowed editing the title I would have prefered to do it that way.
As I am not getting any solutions to that thread and the title is wrong so I am hoping to get a solution with this new post in a different area.
Wed, 2011-02-16 02:36
#3
I am also having a problem on
I am also having a problem on this Forum as I am not getting any Emails to responses even though I am watching this post and the Email option is enabled. This is causing my responses to be serious delayed which is frustrating too.
I thought I would mention that as you seem to have a lot of posts so maybe you have come across that issue too.
Wed, 2011-02-16 14:53
#4
First off, change those divs
First off, change those divs to LI and then give it a wrapper UL.
Give the UL a width of 90% and margin: 0 auto
Then, also provide it with text-align center
In the now LIs remove the float:left and give them display: inline-block
At this point, you should now have all of your content completely centered and fluid.
Wed, 2011-02-16 21:39
#5
That almost works, but how do I get text under each image?
The images were almost centered but I have no way to put text under each image. If I create an
http://www.oahure.com/test6.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> <!-- .galleryWrapper { text-align: center; list-style: none; width:95%; margin:0px:auto; } --> </style> </head> <body leftmargin="0" rightmargin="0"> <p align="center"> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> </p> <ul class="galleryWrapper"> <li display:inline-block> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> </li> </ul> </body> </html>
Wed, 2011-02-16 23:18
#6
well, you can't just toss
well, you can't just toss display:inline-block wherever you please. You have to either put it in a style attribute or put it in your CSS.
Also, you had a crap ton of divs and I told you to replace with them LIs, but instead you just put in one Li and got rid of all the DIVs... not sure what you're doing, but this is what you should have done.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } .galleryWrapper { text-align: center; list-style: none; width: 95%; margin: 0px auto; } .galleryWrapper li { list-style: none; display: inline-block; margin: 10px; } .galleryWrapper li span { display: block; font-size: 12px; font-weight: bold; } --> </style> </head> <body> <ul class="galleryWrapper"> <li> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <span>This is my caption.</span> </li> <li> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <span>This is my caption.</span> </li> <li> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <span>This is my caption.</span> </li> <li> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <span>This is my caption.</span> </li> <li> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <span>This is my caption.</span> </li> <li> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <span>This is my caption.</span> </li> <li> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <span>This is my caption.</span> </li> <li> <img src="http://hbrpictures.marketlinx.com/MediaDisplay/20/hr1101920-1.jpg" width="320" height="240" /> <span>This is my caption.</span> </li> </ul> </body> </html>
Thu, 2011-02-17 00:04
#7
Where's an infinite number of
Where's an infinite number of monkeys when you need 'em?
Sat, 2011-02-19 02:17
#8
Still not centered but a lot closer to center.
Thanks, it is still not centered but it does have margins on both sides and is closer to being centered than I currently have it.
I wish there was a way to center it. It does not seem like an unreasonable request to have a liquid display of photos and want them centered. It is so easy to center a fixed amount of photos, but then I am not using the full screen dimensions for people with a larger viewing area.
Sat, 2011-02-19 04:37
#9
Considering that UL has a
Considering that UL has a left padding it is centered. Perfectly.
Sat, 2011-02-19 05:26
#10
As Versh mentioned, I did
As Versh mentioned, I did forget to clear the padding on the UL.
This is 100% exactly centered besides my minor overlook.
Sat, 2011-02-19 07:11
#11
Awesome
Thanks, I missed Versh's comment. I cleared the padding and it is perfectly centered. Thanks for helping to improve my Website, I really appreciate it!
Sat, 2011-02-19 08:35
#12
Quote: Where's an infinite
Where's an infinite number of monkeys when you need 'em?
Busy writing the works of Shakespeare, which is going to take them a infinite amount of time so a bit unfair to be expecting them to help out on this thread as well.
'Infinite' I'm with those scientists that simply can't except the concept, it unravels the very fabric of existence and throws us into chaos.