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

【问题标题】：Center links in <li> menu vertically<li> 菜单中的链接垂直居中
【发布时间】：2014-01-29 23:15:47
【问题描述】：

我有这个菜单：

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

【问题讨论】：

你看过Flexbox吗？

标签： html css vertical-alignment

【解决方案1】：

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

首先，你不需要display: block;，就像float一样，即使inline元素变成浮动块，就垂直居中而言，不要使用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 */
}

还可以将display: inline-block; 用于li 元素，而不是display: inline; 和vertical-align: top; （不是必需的，但安全总比抱歉好）

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

【讨论】：

感谢您的回答。不幸的是，当我尝试使用您的解决方案时，第二个链接比其他链接要高得多。可能是链接使用 2 行而不是 1 行导致的？
@whateverrest 是的，只有 2 行，等我来做
@whateverrest jsfiddle.net/gkpfL/9 使用 display: inline-block 代替 li 而不是 display: inline
@Mr.Alien - 为什么没有水平对齐属性？我们如何进行水平对齐？
@HelloWorldNoMore 抱歉，水平对齐是什么意思？你在说text-align: center;

【解决方案2】：

您可以将它们对齐在中间，但箭头会使它们对齐的位置低于应有的位置。您必须稍微调整一下，但它类似于：

#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;
        float: left;
        display: table;
        background: url(http://i.imgur.com/JYsyCl6.png) repeat;
        width: 94px;
        height: 60px;
    }

    #menu ul li a{
        display: table-cell;
        vertical-align:middle;

        margin-right: 5px;
        text-align: center;
        font-size: 13px;
        text-decoration: none;
        color: #000;    
        font-weight: normal;
        outline: none;

        opacity: .7;
    }

    #menu li a:hover, #menu li .current{
        color: #C30;
        background: url(http://i.imgur.com/JYsyCl6.png) repeat;
        opacity: 1;
    }

http://jsfiddle.net/gkpfL/8/

【讨论】：

【解决方案3】：

http://jsfiddle.net/gkpfL/7/

将 li 改为 display:inline-block;

删除浮动：左；并添加了 display:table-cell;和垂直对齐：中间；

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

#menu ul li a{
    width: 94px;
    height: 62px;
    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;
     display:table-cell;
    vertical-align:middle;
}

【讨论】：

display: table-cell 与 display: inline-block?您的display: inline-block 甚至不受影响，请谨慎复制粘贴 :)
感谢@Mr.Alien，没看到，会更新答案

【解决方案4】：

DEMO

/* 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-block;
}
#menu ul li a {
    display: table-cell;
    vertical-align: middle;
    width: 94px;
    height: 55px;
    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;
}

vertical-align

vertical-align 属性影响由行内元素生成的框的行框内的垂直定位。

【讨论】：

【解决方案5】：

一个简单的尝试是用一些填充替换高度

#menu ul li a{
 padding: 27.5px 0px;
 height: auto;
}

vertical-align 适用于 inline/inline-block 元素。您也可以使用它在表格单元格中居中内容。但它并非旨在将此类内容居中。

【讨论】：

我知道您将填充高度减半 - 但是文本的高度呢？还有，为什么盒子的左右也要有padding呢？
@oGeez 谢谢 :) 我错过了我已经为各个方向提供了填充。关于文本大小，你也是对的。在这种情况下，您必须设置一定的行高。我错过了什么吗？
Line-height 对你没有帮助，因为有超过 1 行文本的情况。
您可以弄乱<li> 的行高并将另一个行高设置为a... 但是就像我说的，如果您不想要，这是一个便宜的解决方法在这样一个简单的用例中使用 display: table-cell 之类的东西。

【解决方案6】：

试试下面的 CSS：

#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: table-cell;
    background: url(http://i.imgur.com/JYsyCl6.png) repeat;
    vertical-align:middle;
    height: 60px;
}

#menu ul li a{
float: left;
display: table-cell;
width: 94px;
padding: 7px 0 0 0;
margin-right: 5px;
text-align: center;
font-size: 13px;
text-decoration: none;
color: #000;    
font-weight: normal;
outline: none;
opacity: .7;
    margin-bottom: 18px;
}

#menu lihover, #menu li.current{
color: #C30;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
opacity: 1;
}

您也可以考虑使用 CSS 使用 :after 伪元素创建指针

【讨论】：