...

View Full Version : How to vertically align the bottom of text and an image inside a table cell?



stevenwild
04-29-2006, 04:41 PM
Hi,

Sorry to repeat this seemingly oft-asked question, but I've searched/read the forum on this topic and am still struggling somewhat. I'm (obviously) new to CSS, which doesn't help either...

I have an image and a single line of text inside a table cell, which I want to align so that the bottom of the image and the bottom of the text are level.

The image is a link, so contained within <a href> tags, and the text is contained within <div> tags as it uses a class selector.

I want to do the alignment using CSS and am having difficulties understanding which HTML element I target and the property and value required. I have tried targetting the <td> tag and also the <img> tag using the vertical-align property, but cannot seem to get it to work.

Any advice, described in fairly basic terms, would be greatly appreciated!

Thanks,

Steven

_Aerospace_Eng_
04-29-2006, 05:47 PM
Can't help if you don't post any code or give us a link.

Arbitrator
04-29-2006, 08:54 PM
I agree with Aerospace; it's good practice to provide the relevant code to assist others in assisting you. That said, the behavior you seem to be looking for is the default behavior of inline text and images. However, you seem to have a problem because you're using a block-level element, a page division (<div>), to apply a class to pieces of text. Use the inline <span></span> tags instead.

truviet911
04-29-2006, 09:01 PM
either u post ur codes here or upload the page on ur server and give us a link to take a look at it .

stevenwild
04-30-2006, 01:50 PM
OK, here's the code. As you'll be able to tell, I'm fairly new to HTML. However, I should mention that I'm partway through converting this to CSS, so there is a mess of CSS and plain HTML below. Please feel free to flame away at my poor coding, just as long as you also answer my original question.. :thumbsup:



<!-- HEADING SECTION -->
<tr>
<td colspan="3" align="left" valign="bottom" height="200">
<a href="index.html"><img class="logo" src="images/logo.gif" alt="Return to Home Page"/></a>

<div class="pageheading">We bring out the personality and intelligence of Papillons.</div>
</td>
</tr>

An excerpt from the external style sheet:

.pageheading {
vertical-align: bottom;
margin-left: 204px;
color: #666666;
}

.logo {
float: left;
border: 0px;
width: 167px;
height: 128px;

I can't get the text to align at the bottom of the image. Up to now, I've been trying to 'push' the text down using "margin-top: 90px;" in the .pageheading class, instead of using "vertical-align".

Thanks for any help you can give,

Steven

_Aerospace_Eng_
04-30-2006, 05:29 PM
I think because of the image its only aligning to the top of it. Check out the example with background colors.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Documen</title>
<style type="text/css">
.pageheading {
margin-left: 204px;
color: #666666;
padding-top:108px;
background-color:inherit;
}

.logo {
float: left;
border: 0px;
width: 167px;
height: 128px;
background-color:#F00;
}
#header {
text-align:left;
vertical-align:bottom;
height:200px;
background-color:#CCC;
position:relative;
}
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="header">
<!--<a href="index.html"><img class="logo" src="images/logo.gif" alt="Return to Home Page"/></a>-->
<div class="logo">&nbsp;</div>
<div class="pageheading">We bring out the personality and intelligence of Papillons.</div></td>
</tr>
</table>
</body>
</html>
If you remove the top padding of pageheading look where the text goes.

stevenwild
04-30-2006, 05:37 PM
Thanks for the reply. I'll have a better look at it tomorrow, when I'm not quite so buggered. I'll let you know how it goes.

Thanks again,

Steven

stevenwild
05-01-2006, 03:02 AM
Hi Aerospace,

If I understand correctly, you've positioned the text so that it aligns to the bottom of the logo simply by 'pushing it down' using top padding. Presumably you came up with 108px by trial and error.

This is how I was originally doing it, but I would have thought an 'align' of some sort would be more correct - so as to ensure that the text and logo are always aligned, regardless of the vagaries of different browsers. It also seems a bit contradictory to the whole CSS philosophy, because if I change the font size, etc, I'll also have to adjust the top padding.

Could you clarify that this is the best/only way to do it, and that I understand correctly what you've done?

Also, why did you choose to use an ID selector for the 'header' instead of a Class selector? Does it make a difference?

Sorry, another question - why did you need to specify "background-color:inherit" for the 'pageheading' class?

Thanks again for your help - much appreciated.

Steven

Arbitrator
05-01-2006, 04:19 AM
Try this:

<tr>
<td style="height: 200px; text-align: left; vertical-align: bottom;" colspan="3">

<a href="index.html"><img class="logo" style="width: 167px; height: 128px; background: #f00; border: 0;" alt="Return to Home Page" src="images/logo.gif"/></a>

<span style="color: #666;">We bring out the personality and intelligence of Papillons.</span>

</td>
</tr>

If you've set your images to display: block make sure that this image is set to display: inline; or it won't work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum