Html 在<；李>；垂直菜单

我有这个菜单：

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

链接水平居中，但也可以在包含链接的

内垂直居中吗

我读到关于垂直对齐：中间但仅仅将其添加到链接中并不起作用

---

这里有一把小提琴：

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

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

---

垂直对齐适用于内联/内联块元素。还可以使用它将内容集中在表格单元格中。但它并不是设计成这样的中心内容。

您使用的是

float:left这样您就不需要
显示：块

因此，首先，您不需要
display:block当您
浮动
时，即使是
内联
元素也会变成浮动块，直到垂直居中为止，使用
浮动
，而不是使用
显示：表格单元格与
垂直对齐：中间


也可以使用
显示：内联块用于
li
元素，而不是
显示：内联与
垂直对齐：顶部（不是必需的，但最好是安全的，而不是抱歉的）


将li更改为显示：内联块

移除浮子：左；并增加显示：表格单元格；垂直对齐：中间对齐

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

<>你可以在中间对齐它们，但是箭头会使它们对齐到比它应该低的水平。你必须稍微调整一下，但是它有点像：

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



“垂直对齐”属性会影响内联级别元素生成的框的线框内的垂直定位。
请尝试以下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;
}

您还可以考虑使用：after pseudo element创建带有CSS的指针，我知道您将填充高度减半了，但是文本的高度呢？还有，为什么盒子的左右两侧也应该有填充物呢？@oGeez谢谢：）我没有注意到我给了所有方向的填充物。关于文本大小，您也是正确的。在这种情况下，必须设置特定的线高度。我遗漏了什么吗？行高对您没有帮助，因为有些情况下有超过一行的文本。您可能会弄乱
的行高，并将另一行高设置为
a
。。。但是就像我说的，如果你不想在这样一个简单的用例中使用像display:table cell这样的东西，这是一个廉价的解决方法。谢谢你的回答。不幸的是，当我尝试使用您的解决方案时，第二个链接比其他链接高得多。可能是因为链接使用了2行而不是像其他链接一样使用了1行？@whateverrest是的，这是因为有2行，等等，我会做的it@whateverrest对于
li
使用
display:inline block
，而不是
display:inline
@Mr.Alien-为什么没有水平对齐属性？我们如何进行水平对齐？@HelloWorldNoMore抱歉，你说的水平对齐是什么意思？你说的是
文本对齐：居中
显示：表格单元格
与
显示：内联块
？您的
显示：内联块
甚至没有受到影响，请小心复制粘贴：）谢谢@Mr.Alien，没有看到它，将更新答案您查看了吗？
#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;
}

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

/* 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;
}

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