html - 菜单中的链接垂直居中

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 ;但仅将其添加到链接中是行不通的。

这是一个 fiddle :http://jsfiddle.net/gkpfL/

Answer 1

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

所以首先，你不需要 display: block; 当你 float 时，甚至 inline 元素变成 float block ，到目前为止随着垂直居中的进行，不使用 float，而是使用 display: table-cell; 和 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 */
}

还对 li 元素使用 display: inline-block; 而不是 display: inline; 和 vertical-align: top; (不是必需的，但安全总比后悔好)

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