<li> 菜单中的垂直居中链接

Question

我有这个菜单：

<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 -->

这是我目前拥有的 css：

/* 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;
}

链接水平居中，但是否也可以在<li>包含它们的内部垂直居中？

我读过，vertical-align: middle ;但只是将它添加到链接中是行不通的。

这是一个小提琴：http : //jsfiddle.net/gkpfL/

Answer 1

你正在使用float: left;所以你不需要display: block;

所以首先，你不需要display: block;as 当你float，甚至inline元素变成浮动块，就垂直居中而言，而不是使用float，display: table-cell;与vertical-align: middle;

演示

#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 */
}

也display: inline-block;用于li元素而不是display: inline;with vertical-align: top; （不是必需的，但最好是安全而不是抱歉）

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