centering images with captions

**carrotflowers** · Dec 15, 2003 19:59

Hi,
so, (cough, cough,) sorry, I've actually asked this once before but didn't get an answer, but it's come up on a different site & I'd like to figure it out. I have a row of images (in my example below, just 2). they have captions centered below them & they are sitting nicely side by side. However, they are in a container div, and I want them to sit in the center of the container div, side by side, in a row, and row upon row if necessary. I can do side by side, row upon row, but I can't get them centered.

Here is my css:

/* homepage rules */
#wrapper { /* light green outer div */
background-color: #93c273;
padding: 2.5%;
margin-top: 1em;;
margin-right: 2em;
margin-bottom: 1em;;
margin-left: 2em;
}

#container { /* cream container div */
background-color: #ece6c6;
padding: 2em;
margin-left: auto;
margin-right: auto;
}

div.float {
float: left;
text-align: center;
width: 140px;
padding: 0.5em;
}

div.float p {
text-align: center;
}

#purchase {
clear: both;
padding-right: 15%;
padding-left: 15%;
}

and here is my html:

<body>
<img src="images/header3.gif" width="500" height="50">
<div id="wrapper">
<div id="container">
<div class="float">
<img src="images/home_jack.jpg">
<br />
<p>
The Art Gallery
</p>
</div>

<div class="float">
<img src="images/home_untitledbronze.jpg">
<br />
<p>
The Artist's Statement
</p>
</div>
<div id="purchase">
<img src="images/border.gif">
</div>

</div>
</div>
</body>

Hope I made sense! Any help would be appreciated!

**BenANFA** · Dec 16, 2003 06:48

A problem I have seen before and the solution depends on how much extra data you are willing to provide.

For instance if you are happy to say that all images have a given width iWidth(which you already have by setting the width of the float div) and that there will be a set number of images per row iCount then you can simply put all the floated images inside a containing div that will be iWidth*iCount wide and can be centered by setting both the left and right margin to auto.

On the last line you may have to put in extra spacing divs if the line isn't full and you aren't willing to have the last row left justified.

**carrotflowers** · Dec 16, 2003 07:08

Ideally, I had hoped that there was a solution that worked for images that didn't have a uniform width.

For the specific page I am working on, which can be seen here:
http://essenceofthemountains.com/tem...homepage4.html
the images has small variations in width.

However, as you can see in my css above, each image is in a class with a defined width of 140 (this is because without a defined width, these wouldn't sit side by side in mac ie, it needed a defined width or it was stacking them on top of each other.)

So, I guess since I have 4 with a width of 140, I should be able to factor in padding and make the right size container div.

Thanks for the pointer. So you are saying there is no way to center a row of images with captions in a liquid way--without putting them in a static sized container div?

**Paul O'B** · Dec 16, 2003 09:06

Thanks for the pointer. So you are saying there is no way to center a row of images with captions in a liquid way--without putting them in a static sized container div?

I found the easiest solution was to attach the caption to the image in a graphics program and then just use text-align:center on the parent div. (You can use padding/margins to space them out a bit.) It's a bit of a pain I know

Failing that you could do something like this assuming the images ar nearly the same width and you keep the captions a similar length.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>essence of the mountains - nature artwork by Robin August, Asheville, NC</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
 background-color: #14402b;
 font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
 font-size: 75%;
 color: #666600;
 margin: 0;
 padding: 0;
 text-align: center;
}
a:link {
 text-decoration: underline;
 color: #666600;
}
a:hover {
 color: #DE8619;
}
a:visited {
 color: #14402b;
}
#header {
 margin-top: 0.75em;
}
/* homepage rules */
#wrapper { /* light green outer div */
 background-color: #93c273;
 padding: 1.5em;
 margin-top: 1em;;
 margin-right: 3.7em;
 margin-bottom: 1em;
 margin-left: 3.7em;
}
#container {
 background-color: #ece6c6;
 padding: 1.5em;
 margin-right: 0.75em;
 margin-left: .75em;
 text-align:center;
}
#container img {padding:25px;}
#container span{position:absolute; margin-left:-120px}
#purchase {
 clear: both;
 padding-right: 15%;
 padding-left: 15%;
}
#purchase img {
 margin-bottom: 0.5em;
}
-->
</style>
</head>
<body>
<div id="header"><img src="http://essenceofthemountains.com/tem...es/header3.gif" width="500" height="50"></div>
<div id="wrapper">
 <div id="container">
  <img src="http://essenceofthemountains.com/tem.../home_jack.jpg">
  <span>Caption 1</span>
  
  <img src="http://essenceofthemountains.com/tem...tledbronze.jpg">
  <span>Caption 2</span>
  
  <img src="http://essenceofthemountains.com/tem...irchleaves.jpg">
	 <span>Caption 3</span>
  <img src="http://essenceofthemountains.com/tem...3_homepage.jpg">
  <span>Caption 4</span>
 <div id="purchase">
 <img src="http://essenceofthemountains.com/temp/images/border.gif">
 <br />
 <a href="purchase.html">Purchase the Artwork</a>: 
 <br />
 follow this link to email Robin about purchasing her artwork, or view 
 the <a href="gallery.html">gallery</a> to see 
 the variety of notecards, season's card and 
 photographs available.
 </div>
 <!-- end cream container div --> 
 </div>
</div>
</body>
</html>

Which is why I usually just resort to just floating the images and captions left and space them out with some padding

You could use display:table-cell which I think (?) would accomplish what you want but IE doesn't support it unfortunately.

Not much help I know.

Paul

**carrotflowers** · Dec 16, 2003 09:20

Thanks for your thoughts, I always appreciate them, Paul!

Adding captions to the image--rough!

I'll play around with the other options you have both suggested & see how it goes...

**BenANFA** · Dec 16, 2003 10:03

Of course you could always use a table. I like css but there is some stuff that it doesn't do at all well and this is one of them.

My tips would be, don't put in any attibutes that are not mandatory on any of the table tags, use css to format it.

**carrotflowers** · Dec 16, 2003 10:05

Yeah, funny you say that--I originally did this whole page as a table and the code above is me trying to redo it with css.

I was hoping to make a tableless site, for once.

**JasonRCS** · Dec 16, 2003 10:13

Originally Posted by furryyuri

Yeah, funny you say that--I originally did this whole page as a table and the code above is me trying to redo it with css.

I was hoping to make a tableless site, for once.

I am just learning about all the wonders of css, but here is a though:

Could you use a list that is displayed inline to display the images and then center the list.

Ex:

Code:

 <ul>
   <li>image<b />text</li>
   <li>image<b />text</li>
 </ul>

Just a thought, I have seen how you can make list display inline and thought this might work?????

**carrotflowers** · Dec 16, 2003 11:00

Interesting idea! ....they are lining up in a row, but no luck so far getting the <ul> to center. wrapped a div align="center" around it, tried putting it in a div with margin left right set to auto, also tried <ul align="center"> (I don't know if that's even valid). No luck yet...

**BenANFA** · Dec 16, 2003 11:32

OK, align is not an attibute of div ( I think) and even if it is that is better done with css.

Setting left and right margin on the div to auto will not work without setting it's width and the default with of a div is 100% of it's container meaning that centering it does not change it's position.

Did you try setting the left and right margin of the ul to auto.

On tables, not having tables on your site is not a Holy Grail that you should be aiming for. Tables have there place, if, for instance, you want to display tabulated data. What you should not be doing is using tables for your main page layout and you should certainly not be having any table cells with spacer gifs in them.

To summerise you should be aiming for only having tables for those things that they were designed to do (displaying tabluate data).

**JasonRCS** · Dec 16, 2003 12:13

Originally Posted by furryyuri

Interesting idea! ....they are lining up in a row, but no luck so far getting the <ul> to center. wrapped a div align="center" around it, tried putting it in a div with margin left right set to auto, also tried <ul align="center"> (I don't know if that's even valid). No luck yet...

Try:

text-align:center;

in your Container Div CSS this with the <UL> should work..... I think?

**carrotflowers** · Dec 18, 2003 14:21

Nope. In fact, I don't know what I was thinking when I said I got them to line up with <ul> because I can't duplicate. It's ok with just images but when I add the line breaks (for the captions) they are no longer in a row.
Guess it just can't be done!

**Paul O'B** · Dec 18, 2003 14:37

Hi,

I've tried before and came up with the same answers I've already given.

However in a perfect world all it would take would be this.

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.outer {width:500px;
border:1px solid red;
text-align:center;
display:table;
}
p {display:table-cell;}
</style>
</head>
<body>
<div class="outer">
<p>image image<br />text
</p>
<p>image image<br />text
</p>
<p>image image<br />text
</p>
 
</div>
 
</body>
</html>

Unfortunately it only works in Mozilla etc, ie doesn't understand it at all.

That's probably made you feel worse now anyway

Paul

**carrotflowers** · Dec 18, 2003 14:49

sigh...in a perfect world

<beating head against wall>
I can't believe there's no answer!

btw, what's display: table-cell ?

**Paul O'B** · Dec 18, 2003 15:54

btw, what's display: table-cell ?

It declares the element to be a table cell (like a td) and takes on the characteristics of a table cell. Therefore things like vertical align can be used to align inner elements within it.

Paul

**carrotflowers** · Dec 18, 2003 15:56

Ohhhh, that makes sense. Sorry, I'm a little brain dead--end of the day. Thanks again!

**BenANFA** · Dec 19, 2003 04:18

But Paul, if you are going to declare a div to act as a table and fill it with p's declared
as table cells then what is the difference between that and just putting in a table tag
with some table cells inside it ?

**Paul O'B** · Dec 19, 2003 11:59

Hi Benanfa,

what is the difference between that and just putting in a table tag
with some table cells inside it ?

Well for one thing it's still not a table

But granted theres not much code difference

This:

Code:

<div class="outer">
<p>image image<br />text</p>
<p>image image<br />text</p>
<p>image image<br />text</p> 
</div>

as opposed to this:

Code:

  <table summary"This is a table used for layout">
	<tr> 
	  <td>image image<br />text</td>
	  <td>image image<br />text</td>
	  <td>image image<br />text</td>
	</tr>
  </table>

Obviously we avoid the "not using tables for layout" directive but it's all subjective anyway as we can only use this example on a minority of browers

I'm not against tables and sometimes as you say a small table with css formatting is perfect for the job in hand. (I just like to try and do everything without them and to tell you the truth I never was much good at doing layouts with tables

(not that my css designs are much better but I keep trying lol).

In this instance a table probably is the only way to code the problem reliably. Although If I was doing it, I wouldn't bother with the centering and I'd just float them left. (Perhaps that's why I'll never be a good designer because I'm easily satisfied.)

Paul

User Tag List

Thread: centering images with captions

Thread Tools

Display

centering images with captions

Bookmarks

Bookmarks

Posting Permissions