www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to center vertically?

  1. #1
    Join Date
    May 2005
    Posts
    502

    How to center vertically?

    Is there a way I can vertically center both an image and some text in (say) an <a> tag?

    Whatever I try the text always demands to be aligned with the bottom of the image...

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Try setting the line-height of the <a> to the height of the image.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  3. #3
    Join Date
    May 2005
    Posts
    502
    Still not working

    Code:
                #menu_options a
                {                  
                      width: 132px;
                      line-height: 30px;
                      text-decoration: none;
                      vertical-align: middle;        
                }
    This is nuts, there must be a way to do it...

  4. #4
    Join Date
    May 2005
    Posts
    502
    Aha I've done it...

    I had to set the image style to "float:left"

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    There is always the deprecated align="" and inside of the "", are either texttop, top, middle, absmiddle, or absbottom.
    If you are doing what I think you are for a signature branding at the bottom of a page, you could also merely style the image with a margin to 'balance' it proportionally with the visible text. So, a hyperlink text with an accompanying image might resemble:

    <p><a href="#">Here is my link</a><img src="#" style="width:20px; height:20px; margin-top:6px;"></p>
    Last edited by WebJoel; 09-12-2006 at 07:47 AM.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles