need help to align my text and image to be vertically centered side by side

Discussion in 'CSS' started by iMerickz, Aug 19, 2009.

  1. #1
    hi,
    i have insert a small image by the size of 64px x 11px just beside a line of word text in my blog post. but the word text and the image are not in line vertically..

    how can i align in a straight line?

    i believe this is simple using css, etc but i know nothing about html, css, etc. anyone can help to advise on this plsss.. i can pay a token sum for your help.. post here to reply or pm me.. thanks.. :)
     
    iMerickz, Aug 19, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,

    When you say vertically align how do you want the text and image to line up. From your description you say the image is 11 pixels tall, but how tall is your text (font-size)? Is it bigger than this or smaller?

    Anyhow the trick for vertically aligning a single line of text, is to give it a line-height, of the total height. So say you wanted your text to be vertically centered in a height of 500px, you would give it a line-height of 500px (using CSS). For example:

    
    HTML:
    <img src="myimg.gif alt="description" class="vertical_img /><span class="vertical_txt">Some Text</text>
    
    CSS:
    .vertical_img { width:64px; height:11px; }
    .vertical_txt { line-height: 11px; }
    
    Code (markup):
    You can also use this trick for images, and give your image a line-height to vertically center it.
     
    wd_2k6, Aug 19, 2009 IP
  3. loga

    loga Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    While using png line-height gives a problem in ie browser...

    <img src="myimg.png" alt="description" align="absmiddle" /><span>Some Text</span>

    This is the way to fix the text and image placed vertically in all browser..
     
    loga, Aug 20, 2009 IP
  4. webbymommy

    webbymommy Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    use the float element
     
    webbymommy, Aug 20, 2009 IP