CSS text-align middle thing:

Discussion in 'Web Design and Development' started by dpaanlka, Oct 13, 2007.

  1. dpaanlka macrumors 601

    dpaanlka

    Joined:
    Nov 16, 2004
    Location:
    Illinois
    #1
    I cannot for the life of me get the navigation and searchbox to center themselves vertically inside their little box:

    http://www.info-mac.org/test

    what am I missing here? i'm new to CSS
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Essentially, it's harder than it should be. Check this site for details, http://phrogz.net/CSS/vertical-align/index.html

    As a semi-solution you can mess with line-height. It fails though when the user starts messing with the text size (zooming).

    .headerimage #form1 a {
    color: #FFFFFF;
    line-height: 40px;
    }
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    I messed with the CSS a little bit and found a way to do it with what you have.

    .headerimage {
    // add
    display: table-cell;
    vertical-align: middle;
    ...
    }

    .headerimage #form1 {
    ...
    // remove
    height: 85px;
    ...
    }

    This'll at least work in Firefox where i was testing it with the Web Developer Toolbar extension, but I'm pretty sure it works in most browser (though you never know with IE).
     

Share This Page