How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

Tags: css,center,padding,vertical-alignment,navigationbar

Problem :

I have made a functional CSS navigation-bar, except for some fugly CSS side-effects --

I am trying to vertically center the text in each list block, and vertical-align: middle was not working. Instead, I am using padding-top: 13px, but this renders the padded area without the background-color of the rest of the list element, and the display: inline block styling of the link does not extend to the padded area either! (a:hover is affecting only the area below the padding)

So how can I vertically center text in list elements without these CSS problems?

Here is the relevant CSS:

/* header section */
    padding-left: 115px;
    margin-bottom: 10px;
        list-style-type: none;
    #main-menu li
        border: 1px solid black;
        text-align: center;
        padding-top: 13px;

        color: #666;
        font-family: "Lucida Console";
        font-variant: small-caps;
        letter-spacing: 2px;

        /* for  block layout */
            display: -moz-inline-box; /* for firefox */
            display: inline-block;

        width: 153px;
        height: 32px;
    #main-menu a:link, a:visited
        display: -moz-inline-box; /* for firefox */
        display: inline-block;

        width: 100%;
        height: 100%;
        background-color: #eee;
    #main-menu a:hover, a:active
        background-color: #bbb;
    }<br /><br />

...and here is the relevant HTML:

        <!-- header section -->
        <div id = "header">
            <ul id = "main-menu">
                <!-- no spaces between list elements when all on the same line! -->
                <li><a href = "home.html" title = "home">home</a></li><li><a href = "about.html" title = "about">about</a></li><li><a href = "cart.html" title = "shopping cart">cart</a></li><li><a href = "login.html" title = "log in">login</a></li><li><a href = "createAccount.html" title = "create a new account">sign up</a></li>

        </div> <!-- end of header section -->

Solution :

Things that I changed:

  • Changed the link to display as a block element.
  • Removed the padding at the top of the li elements.
  • Added that padding height to the height of the li elements.
  • Set the line-height to the height of the li elements.
  • Some formatting

    CSS Howto..

    how to increase/decrease font-size from external css [closed]

    how to remove elements in document fragment after append

    How to make this slider more fluid?

    how to have spacing html/css

    How can write a CSS style for a parent class?

    How to add JS and CSS file in web page based on parameter?

    How would you go about placing li in different divs?

    How to vertically center text overlapping an image?

    How to reduce my code in both jQuery and CSS

    How to add threshhold onclick() jQuery?

    How do I target nested elements with CSS correctly? [closed]

    how to avoid from loading unnecessary javascript and css in page on codeigniter to improve the load time [closed]

    How to target a specific element of a div in CSS?

    How to create a Sass mixin for this CSS radial gradient?

    How to align 'n' divs horizontally WITH margin/padding?

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How to style ul horizontally

    Any idea how to add this sinking hover effect to an image/link?

    How to interchange table cells using Pure CSS

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    how to restrict the children element inside the parent element in css?

    How do I convert HTML to inline CSS in Google AppEngine?

    How could I add two separate text styles to a button in a form in CSS?

    How can I get these two widgets to align horizontally using CSS selectors?

    How can I centralize this jquery styling colors into css?

    How do i get a font to show up smooth like this?

    How to select -webkit-filter: drop-shadow with jQuery?

    How to make CSS animation jump rather than slide

    How to position two divs horizontally within another div

    jQuery: accordion-LIKE format. how to prevent div from collapsing if one of the checkboxes is checked