12 replies [Last post]
OahuRE
OahuRE's picture
Offline
Regular
Hawaii
Last seen: 9 years 36 weeks ago
Hawaii
Timezone: GMT-10
Joined: 2011-02-12
Posts: 11
Points: 14

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>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 5 days 3 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

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 Stare

OahuRE
OahuRE's picture
Offline
Regular
Hawaii
Last seen: 9 years 36 weeks ago
Hawaii
Timezone: GMT-10
Joined: 2011-02-12
Posts: 11
Points: 14

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.

OahuRE
OahuRE's picture
Offline
Regular
Hawaii
Last seen: 9 years 36 weeks ago
Hawaii
Timezone: GMT-10
Joined: 2011-02-12
Posts: 11
Points: 14

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.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 45 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

OahuRE
OahuRE's picture
Offline
Regular
Hawaii
Last seen: 9 years 36 weeks ago
Hawaii
Timezone: GMT-10
Joined: 2011-02-12
Posts: 11
Points: 14

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

  • for each image then it drops the next image to the next line. If I just use one
  • like shown in the link or the code below then the images work but with no way to put some text description under each one. Any suggestions?
  • 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>

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 4 years 45 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    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>

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    Verschwindende
    Verschwindende's picture
    Offline
    Guru
    Last seen: 5 days 3 hours ago
    Timezone: GMT-4
    Joined: 2009-10-09
    Posts: 2050
    Points: 2282

    Where's an infinite number of

    Where's an infinite number of monkeys when you need 'em?

    OahuRE
    OahuRE's picture
    Offline
    Regular
    Hawaii
    Last seen: 9 years 36 weeks ago
    Hawaii
    Timezone: GMT-10
    Joined: 2011-02-12
    Posts: 11
    Points: 14

    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.

    Verschwindende
    Verschwindende's picture
    Offline
    Guru
    Last seen: 5 days 3 hours ago
    Timezone: GMT-4
    Joined: 2009-10-09
    Posts: 2050
    Points: 2282

    Considering that UL has a

    Considering that UL has a left padding it is centered. Perfectly.

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 4 years 45 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    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.

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    OahuRE
    OahuRE's picture
    Offline
    Regular
    Hawaii
    Last seen: 9 years 36 weeks ago
    Hawaii
    Timezone: GMT-10
    Joined: 2011-02-12
    Posts: 11
    Points: 14

    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!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 20 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Quote: Where's an infinite

    Quote:

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me