我有这个菜单：
<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/
您正在使用，float: left;所以您不需要display: block;
因此，首先，你不需要display: block;为你的时候float，即使inline元素成为浮动块，至于垂直居中去，而不是使用float，使用display: table-cell;随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;用于vertical-align: top; （不是必需的，但是比起遗憾，更好地是安全的）
#menu ul li {
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句