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;就像float，甚至inline元素成为浮动块一样，就垂直居中而言，而不是{{1} }，使用float和display: table-cell;

Demo

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;（不是必需的，但更安全而不是抱歉） < / p>

vertical-align: top;

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

Answer 3

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

将li更改为display：inline-block;

删除了float：left;并添加显示：table-cell;和vertical-align：middle;

#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;
}

Answer 4

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

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

vertical-align适用于内联/内联块元素。您也可以使用表格单元格中的内容。但它不是设计用于中心内容喜欢这个。

Answer 5

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属性会影响由内联级元素生成的框的行框内的垂直定位。

Answer 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 pseudo element

垂直<li>菜单中的中心链接</li>

6 个答案: