SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning text to the bottom of an image

    Hi there,

    I'm using the align="left" property on an <img> tag to allow me to place text along side it.

    However, the text that is next to it is aligned to the top of the image. Is there a way I can align it to the bottom? Something like <valign> or something?

    Is it something that can be done in the CSS? Or it should be in the HTML itself? The text will be encased in an <h1> tag if that makes any difference.

    Thanks alot for your help

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sigh, if only the vertical-align CSS property was actually supported by Internet Explorer.

    A couple ideas do come to mind, but given that this text will be going inside a heading (where images do not belong), I'll have to try them out first before I can recommend a possible solution.

  3. #3
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    options

    You should be using CSS to position Text and Images.

    1) http://www.w3.org/Style/CSS/learning - read up on the basics of CSS
    2) http://www.w3.org/TR/REC-CSS2/visuren.html#floats - learn about Containing blocks and Image Floats


    1) Right-justify text:
    -------------------------------
    <img src="images/my image.gif"> <h1 style="text-align: right">My text</h1>



    2) Float the image to the left
    ---------------------------------------------
    <img src="images/my image.gif" style="float: left; margin: 2em;">

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Floats don't stop your text from sitting at the top. I have the same problem: I've got an <a> which is also now taking an img out of the HTML and into the background where it belongs (I ran out of sandbags). So, the image and the link are the same. But, I wanted the text to sit at the bottom of the image. The <a> was display:block and the only way I got it to work was to set a line-height twice the size of the image!

    Yeah, it works but it's clunky and IE6 thinks line-height=height so I know I'm barking up the wrong tree. I think this can still be done without going back to the seperate image and link. Even if the image were to sit next to the text and was floated left or right, the text would still need to be pushed to the bottom. Padding doesn't cut it. Vertical align only moves it a bit, as I'm still stuck with the baseline... I think because I've changed this to a block. I'm not sure CSS has a way to do this, knowing it's got troubles with vertical alignment compared to the old tables.

    *Edit text-bottom : The bottom of the element will be aligned with the bottom of the parent element.
    But if I recall correctly this is an IE-only thing?

  5. #5
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies ... it sounds like I'm going to have to be happy with text aligning itself with the top of the image then

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    *Edit text-bottom : The bottom of the element will be aligned with the bottom of the parent element.
    But if I recall correctly this is an IE-only thing?
    The line-height was set large to put the text down and the height growed with it.

    What if the parent gets the height set and overflow hidden?
    Would that work?
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I think when I did that I got nothing better since the height was already set and IE still lets the height grow anyway... it always tried to accomodate the height.

    I ended up having to re-arrange the background images to get around the problem : ( so still, as far as I know, I cannot vertically align text which is sitting in a block element. Maybe it would work with display: table-cell or something.

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by simontheak View Post
    Hi there,

    I'm using the align="left" property on an <img> tag to allow me to place text along side it...
    I did never get it. Would text on the same line not be beside the image without that attribute on the image?
    ... However, the text that is next to it is aligned to the top of the image. Is there a way I can align it to the bottom? Something like <valign> or something? ...
    If the image gets "img{vertical-align:text-bottom}" in css, text on the same line as image will be affected. (Due to the line-box will contain both the image and the text.)
    ... The text will be encased in an <h1> tag if that makes any difference.
    Is the image also inside the h1 tag?
    If so, the text is vertical aligned as the image setting.
    If not, the h1 can be set "h1{display:inline}" and so be vertical aligned by the image sitting outside it.

    I'm not sure I understand the issue though, but hopeful I will.
    Happy ADD/ADHD with Asperger's

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If the image is an inline element then vertical-align works nicely on inline elements.

    e.g.

    http://www.pmob.co.uk/temp/vertical-align.htm

    If the image is a block level then vertical align doesn't apply but you can use various methods to align the text as required although at the expense of a little complexity.

    http://www.pmob.co.uk/temp/vertical-align3.htm
    http://www.pmob.co.uk/temp/vertical-align9.htm
    http://www.pmob.co.uk/temp/vertical-align5.htm
    http://www.pmob.co.uk/temp/vertical-...play-table.htm
    http://www.pmob.co.uk/temp/vert-align-textandimage.htm
    http://www.pmob.co.uk/temp/vertical-...ext-bottom.htm
    http://www.pmob.co.uk/temp/vertical-align-2divstobase2.htm
    http://www.pmob.co.uk/temp/vertical-align-text.htm


    That should keep you busy for a while

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that kept me busy.

    Hopefully the OP issue is covered now.

    Trying to display the line-boxes, and to see if it is the same line or inside the tag that matters, I made a fluid test case. I think I got it now.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Vertical-Align Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    div {
      border-top: 1px solid #000;
      font: 13px/15px arial;
      background: #99f;
    }
    div p {
      margin: 0;
      line-height: 30px;
      vertical-align: text-bottom;
      border-top: 1px solid #000;
    }
    div h5{
      display: inline;
      line-height: 30px;
      vertical-align: text-top;
      background: #ff9;
    }
    img {
      width: 70px;
      height: 90px;
      font-size: 9px;               /* sets the alt text size on good browsers */
      vertical-align: text-bottom;
      background: #9ff;
    }
    div p span {
      line-height: 60px;
      vertical-align: text-bottom;
      background: #f9f;
    }
    p img {
      vertical-align: middle;
    }
    span img {
      vertical-align: text-top;
    }
    div p a {
      line-height: 90px;            /* effective if greater than image height */
      vertical-align: text-bottom;
      background: #9f9;
    }
    a img {
      height: 45px;
      vertical-align: text-top;
    }
    </style>
    </head>
    <body>
    <div>
      <p>Height and vertical alignment set on inline-image is affecting text line wrapped to image line. (Inline text is placed on base-line, not to confuse with leading.)</p>
      <div>
        <h5>Heading displayed inline, line-height 30px, vertical align text-top. Image 90px placed<em> outside heading </em>has vertical align text-bottom.</h5>
    		&nbsp; <img src="" alt="90px bottom">
      </div>
      <p>
        Line-wrapping changes the vertical alignment between line with/without image. Image height becomes minimum line-height.
        <span>Span <img src="" alt="90px text- top"> line-height 60px, text aligned text-bottom, image 90px inside span is vertical align text-top.</span>
        Image aligned middle <img src="" alt="90px middle"> placed between span and anchor.
        <a href="#">Anchor, line-height 90px, text vertical aligned text-bottom, image 45px inside anchor has vertical align <img src="" alt="45px text-top"> text-top.</a>
      </p>
    </div>
    </body>
    </html>
    Last edited by Erik J; Feb 25, 2008 at 04:25. Reason: Updated code.
    Happy ADD/ADHD with Asperger's

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by erik
    I think I got it now.
    While its still fresh in your mind you might want to get to grips with the full details of inline formatting (its not for the faint hearted)

    http://meyerweb.com/eric/css/inline-format.html
    http://reference.sitepoint.com/css/inlineformatting

  12. #12
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! The second link said nothing new, but Eric Meyer certainly did.

    And I didn't think about the use of negative vertical margin on a replaced inline element.
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

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