Centering Images with text

Braxton · August 31, 2011, 12:37am

I’m trying to center a group of images that have text underneath. I would like it to resemble this:

So, I can specify row width, margin between images and text, margin of rows, etc… I would also like to have it so that the rows would not change if someone changes the size of their browser.

This is what I have so far, but it is not working. The list-width of the rows have an effect nor do margins for rows.

I wasn’t sure if I need div.center or not. Right now it is commented out.

This is what I have so far…

And, here are the links:
Test
http://cadillacmargarita.com/css/style.css


div.center {   
	margin-left: auto;   
	margin-right: auto;   
	width: 800px; 
	}
	
#gallery {
	list-style-type: none;
	list-width: 800;
	}
#gallery li {
	display: inline;
	width: auto;
	margin-right: 20px;
	margin-bottom: 60px;
	font: bold 110% Arial, Helvetica, sans-serif;
	color: #333333;
	}
#gallery img {
	border: 4px solid #000;
	margin-bottom: 20px;
	}

<!--<div class="center">-->
    <ul id="gallery">
        <li><a href="http://cadillacmargarita.com"><img src="images/001.jpg"/></a><a href="http://cadillacmargarita.com">Subject 1</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/002.jpg"/></a><a href="http://cadillacmargarita.com">Subject 2</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/003.jpg"/></a><a href="http://cadillacmargarita.com">Subject 3</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/004.jpg"/></a><a href="http://cadillacmargarita.com">Subject 4</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/005.jpg"/></a><a href="http://cadillacmargarita.com">Subject 5</a></li>
    </ul>
<!--</div>-->

Any help would be greatly appreciated. Thanks.

dresden_phoenix · August 31, 2011, 1:19am

Try doing this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
	
	<style type="text/css">
#gallery {
    list-style-type: none;
    margin-left: auto;   
    margin-right: auto;   
    width: 800px;
    text-align: center

    }
#gallery li {
    display: inline-block;
    overflow: hidden;
    margin-right: 20px;
    margin-bottom: 60px;
    font: bold 110% Arial, Helvetica, sans-serif;
    color: #333333;
    text-align: center;
    border: 1px solid red
    }
#gallery li a{
	float: left; width:100%; 
    text-align: center;
    }
#gallery img {
width:100px;  /*I put this here  so I would not have to load an actual immage, get rid of it*/
    border: 4px solid #000;
    margin-bottom: 20px;
    }</style>
		
	</head>
	<body>
    <ul id="gallery">
        <li><a href="http://cadillacmargarita.com"><img src="images/001.jpg"/></a><a href="http://cadillacmargarita.com">Subject 1</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/002.jpg"/></a><a href="http://cadillacmargarita.com">Subject 2</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/003.jpg"/></a><a href="http://cadillacmargarita.com">Subject 3</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/004.jpg"/></a><a href="http://cadillacmargarita.com">Subject 4</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/005.jpg"/></a><a href="http://cadillacmargarita.com">Subject 5</a></li>
    </ul> 	</body>
</html>

but you are better off, since the links for the image and the text lead to the same url … amalgamating the two anchor tags and doing this, which is FAR CLEANER.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
	
	<style type="text/css">
#gallery {
    list-style-type: none;
    margin-left: auto;   
    margin-right: auto;   
    width: 800px;
    text-align: center

    }
#gallery li {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 60px;
    font: bold 110% Arial, Helvetica, sans-serif;
    color: #333333;
    border: 1px solid red
    }
#gallery li a{
    display:block; text-align: center
    }
#gallery img {
width:200px;  /*I put this here  so I would not have to load an actual immage, get rid of it*/
    border: 4px solid #000;
    margin-bottom: 20px;
    display:block
    }</style>
		
	</head>
	<body>
    <ul id="gallery">
        <li><a href="http://cadillacmargarita.com"><img src="images/001.jpg"/>Subject 1</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/002.jpg"/>Subject 2</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/003.jpg"/>Subject 3</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/004.jpg"/>Subject 4</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="images/005.jpg"/>Subject 5</a></li>
    </ul> 	</body>
</html>

Braxton · August 31, 2011, 3:15am

Thank you so much Ray!

The first example did not work. The second works like a charm.

Just curious…analyzing 2nd example…I changed the 1st example to get it to work by changing #gallery li a:

[INDENT]Took out: float: left; width:100%;
Added: display: block;[/INDENT]

How does “overlfow: hidden” affect things. It is in the 1st example but not the 2nd.

Also, display:block; is in #gallery img in the 2nd example but not the 1st. But both examples work after the above change. Does that matter?

Example 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
	
	<style type="text/css">
#gallery {
    list-style-type: none;
    margin-left: auto;   
    margin-right: auto;   
    width: 800px;
    text-align: center

    }
#gallery li {
    display: inline-block;
    overflow: hidden;    /*In 1 but not 2*/
    margin-right: 20px;
    margin-bottom: 60px;
    font: bold 110% Arial, Helvetica, sans-serif;
    color: #333333;
    text-align: center;   /*In 1 but not 2*/
    border: 1px solid red
    }
#gallery li a {
	 /*float: left; width:100%;    I commented this out to see if it work.  As the other doesn't have it.   Adding the display:  block*/
	display: block;
    text-align: center;
    }
#gallery img {
/*width:100px;  I put this here  so I would not have to load an actual immage, get rid of it*/
    border: 4px solid #000;
    margin-bottom: 20px;
    }</style>
		
	<title>Example 1</title></head>
	<body>
    <ul id="gallery">
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/001.jpg"/></a><a href="http://cadillacmargarita.com">Subject 1</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/002.jpg"/></a><a href="http://cadillacmargarita.com">Subject 2</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/003.jpg"/></a><a href="http://cadillacmargarita.com">Subject 3</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/004.jpg"/></a><a href="http://cadillacmargarita.com">Subject 4</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/005.jpg"/></a><a href="http://cadillacmargarita.com">Subject 5</a></li>
    </ul> 	
</body>
</html>

Example 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
	
	<style type="text/css">
#gallery {
    list-style-type: none;
    margin-left: auto;   
    margin-right: auto;   
    width: 800px;
    text-align: center

    }
#gallery li {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 60px;
    font: bold 110% Arial, Helvetica, sans-serif;
    color: #333333;
    border: 1px solid red
    }
#gallery li a{
    display:block; text-align: center
    }
#gallery img {
/*width:200px;  /*I put this here  so I would not have to load an actual immage, get rid of it*/
    border: 4px solid #000;
    margin-bottom: 20px;
    display:block;       /*In 2 but not 1*/
    }
    </style>
		
	<title>Example 2</title></head>
	<body>
    <ul id="gallery">
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/001.jpg"/>Subject 1</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/002.jpg"/>Subject 2</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/003.jpg"/>Subject 3</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/004.jpg"/>Subject 4</a></li>
        <li><a href="http://cadillacmargarita.com"><img src="http://www.sitepoint.com/forums/images/005.jpg"/>Subject 5</a></li>
    </ul> 	
</body>
</html>

Thanks again.

Oh, one more thing…shows great in browsers but not in the Dreamweaver CS4 “Design” window. Is that because Dreamweaver CS4 is less than perfect or not up to date?

Black_Max · August 31, 2011, 5:13am

Forget the DW “design” window. It is worse than useless. If it works in representative browsers (FF, Chrome, Opera, a recent version of IE), you’re good to go.

Braxton · August 31, 2011, 5:17am

Thanks Black. I had the feeling that was the case. I often see it different there than in the browsers. I find myself working a lot in code window and then viewing in a browser, too.

dresden_phoenix · August 31, 2011, 7:23am

for the record:

Took out: float: left; width:100%;

Added: display: block;

How does “overlfow: hidden” affect things. It is in the 1st example but not the 2nd.

when ever you FLOAT something it automatically becomes BLOCK. so having float:whatever; display: block; is redundant.

a floated element is “shrinkwrapped” which is why I added width:100%; but a block element is , by default 100% the width of it’s parent.

NEVER preview on WYSIWYGs…like DW.

Braxton · August 31, 2011, 7:30am

Thanks.

PaulOB · August 31, 2011, 11:26am

Please let IE6 and 7 come out to play


#gallery li {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 60px;
    font: bold 110% Arial, Helvetica, sans-serif;
    color: #333333;
    border: 1px solid red
    }
[B]* html #gallery li {display:inline}
*+html #gallery li {display:inline}[/B]

Braxton · August 31, 2011, 2:26pm

Thanks Paul. Do I add the bold code just as written with the asterisks, html, and plus sign?

PaulOB · August 31, 2011, 2:56pm

Yes add everything in the code block:


* html #gallery li {display:inline}/* ie6 inline-block fix using * html hack */
*+html #gallery li {display:inline}/* ie7 inline-block fix using *+html hack*/

However the above code must follow the original otherwise it will fail. You must not comma separate those hacks either so they must looks as they did in my first post.

The hacks are explained here.

Braxton · August 31, 2011, 4:14pm

Great. Thank you.

Topic		Replies	Views
Centering Images With CSS Get Started	3	253	July 13, 2010
How can I easily center images within a div? HTML & CSS	6	15546	October 8, 2014
Center multiple divs? HTML & CSS	4	1692	October 8, 2014
Center images in window? HTML & CSS	3	615	October 8, 2014
Images not centred HTML & CSS	9	1091	July 30, 2015

Centering Images with text

Related topics