0

我制作了一个功能性的 CSS 导航栏，除了一些丑陋的 CSS 副作用——

我试图将每个列表块中的文本垂直居中，vertical-align: middle但没有工作。相反，我使用的是padding-top: 13px，但这会呈现没有background-color列表元素其余部分的填充区域，并且display: inline 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 -->
4

3 回答 3

3

我改变的事情：

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

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

于 2012-04-08T19:34:41.627 回答
1

尝试设置行高

line-height: 13px;
于 2012-04-08T19:34:52.433 回答
1

我对任何事情都不太了解，但我刚刚使用过它并且它有效

进入通用样式的快速CSS

li {
    display:inline;
    padding: 0px 50px;
}

第一个 px 将菜单项向下，第二个将它们分开。

于 2016-01-17T12:15:06.163 回答