Center links in <li> menu vertically

css, html, vertical-alignment

Solution

You are using `float: left;` so you won't need `display: block;`

So first, you don't need `display: block;` as when you `float`, even `inline` elements become floated blocks, as far as the vertical centering goes, instead of using `float`, use `display: table-cell;` along with `vertical-align: middle;`

Demo

#menu ul li a{
    display: table-cell; /* Add this */
    vertical-align: middle; /* Add this */
    width: 94px;
    height: 55px;
    padding-bottom: 5px; 
    /* Use this for a spare bottom space for your background-image */

    /* Rest of the properties goes here */
}

Also use `display: inline-block;` for the `li` element instead of `display: inline;` with `vertical-align: top;` (Not required but better to be safe than sorry)

#menu ul li {
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
}

Problem

I have this menu: ``` <div id="menu"> <ul> <li><a href="./index.html" target="_parent" class="current">Home</a></li> <li><a href="./programm.html" target="_parent">Programm & Preise</a></li> <li><a href="./kuenstler.html">Künstler</a></li> <li><a href="./rueckblick.html">Rückblick</a></li> <li><a href="./team.html" target="_parent">Team</a></li> </ul> </div> <!-- end of menu --> ``` And this is the css I have at the moment: ``` /* menu */ #menu { clear: both; width: 670px; height: 64px; background: url(images/menu_yellow.png) no-repeat bottom; } #menu ul { margin: 0; padding: 0; list-style: none; } #menu ul li { padding: 0; margin: 0; display: inline; } #menu ul li a{ float: left; display: block; width: 94px; height: 55px; padding: 7px 0 0 0; margin-right: 5px; text-align: center; font-size: 13px; text-decoration: none; color: #000; font-weight: normal; outline: none; background: url(http://i.imgur.com/JYsyCl6.png) repeat; opacity: .7; } #menu li a:hover, #menu li .current{ color: #C30; background: url(http://i.imgur.com/JYsyCl6.png) repeat; opacity: 1; } ``` The links are centered horizontally, but is it also possible to center it vertically inside the `<li>` that contain them? I read about `vertical-align: middle ;` but just adding it to the links does not work. Here is a fiddle: http://jsfiddle.net/gkpfL/

Original source