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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Vertically Centering Text and Images

    I'm having trouble vertically centering both images and text together.
    Here is the (untidied) code I'm using for testing purposes:

    Code:
    <div style="float:right;clear:right;font-weight:normal;height:26px;line-height:1.9">
    <img src="images/esp_flag.gif" width="21" height="16" style="vertical-align:middle;margin-top:-3px" /> Español | <img src="images/chn_flag.gif" width="21" height="16" style="vertical-align:middle;margin-top:-3px" /> 中文简体</div></div>
    And here's how they look in the 2 main browsers:



    The vertical-align:middle works for firefox but not IE. Can anyone tell me what I need to add to get everything vertically centered properly?
    Thank you.

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I would move the css to the head section of the page. Then I would add a IE hack to add a top padding. Once I got it working, I would then move the css to its own file.

    The hack might look like this:

    #yourdivid or img or .yourclass {
    _padding-top: 3px; }

    where you adjust the size to where you want it.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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