css - 如何在没有这些多个 CSS 冲突的情况下将 ul 导航栏中的文本垂直居中？

Question

我制作了一个实用的 CSS 导航栏，除了一些糟糕的 CSS 副作用 --

我试图将每个列表 block 中的文本垂直居中，而 vertical-align: middle 不起作用。相反，我使用的是 padding-top: 13px，但是这会渲染没有列表元素其余部分的 background-color 和 display 的填充区域: 内联 block 链接的样式也不会扩展到填充区域! (a:hover 仅影响内边距下方的区域)

那么如何在没有这些 CSS 问题的情况下将列表元素中的文本垂直居中？

这是相关的 CSS:

/* header section */
#header
{
    padding-left: 115px;
    margin-bottom: 10px;
}
    #main-menu
    {
        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 />

...这是相关的 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>
            </ul>

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

Answer 1

我改变的事情:

• 将链接更改为显示为 block 元素。
• 删除了 li 元素顶部的填充。
• 将该填充高度添加到 li 元素的高度。
• 设置 line-height 为 li 元素的高度。
• 一些格式

http://jsfiddle.net/gtr053/7yrX7/