Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2006
    Location
    Melbourne, Australia
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can't help if you don't post any code or give us a link.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Sep 2004
    Location
    California
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    either u post ur codes here or upload the page on ur server and give us a link to take a look at it .

  • #5
    New Coder
    Join Date
    Apr 2006
    Location
    Melbourne, Australia
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..


    Code:
    <!-- 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:
    Code:
    .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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think because of the image its only aligning to the top of it. Check out the example with background colors.
    Code:
    <!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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Apr 2006
    Location
    Melbourne, Australia
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    New Coder
    Join Date
    Apr 2006
    Location
    Melbourne, Australia
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    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.
    Last edited by Arbitrator; 05-01-2006 at 03:24 AM. Reason: corrections, formatting
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •