View Full Version : How to vertically align the bottom of text and an image inside a table cell?
04-29-2006, 03:41 PM
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!
04-29-2006, 04:47 PM
Can't help if you don't post any code or give us a link.
04-29-2006, 07: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.
04-29-2006, 08: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 .
04-30-2006, 12: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 -->
<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>
An excerpt from the external style sheet:
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,
04-30-2006, 04: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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<table cellpadding="0" cellspacing="0">
<!--<a href="index.html"><img class="logo" src="images/logo.gif" alt="Return to Home Page"/></a>-->
<div class="logo"> </div>
<div class="pageheading">We bring out the personality and intelligence of Papillons.</div></td>
If you remove the top padding of pageheading look where the text goes.
04-30-2006, 04: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.
05-01-2006, 02:02 AM
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.
05-01-2006, 03:19 AM
<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>
If you've set your images to display: block make sure that this image is set to display: inline; or it won't work.