SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image and text vertical align

    I have a 10px square image at the start of a line of text.
    Font size is 10px. When I increase the line height to add leading, the image sits higher than the text.

    How do I fix this?

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

    Well in IE you could just add img{vertical-align:middle} which should achieve the result you want however mozilla will align the middle of the image to the bottom of the text which is not quite the same.

    Probably the best way is to tweak it manually like this so that you place it where you want it.

    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 type="text/css">
    body {font-size:10px}
    img {vertical-align:-2px}
    p {line-height:20px;}
    </style>
    </head>
    <body>
    <p><img src="images/red.gif" width="10" height="10" />This is some text</p>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, P.
    Another fine mess you've gotten me out of.

    ;-)

    g


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
  •