无序列表中垂直居中超链接时的问题
我使用以下（简化的）代码将超链接在 UL 中垂直居中。我知道我将样式应用于超链接而不是 li 可能看起来很奇怪，但我要求整个列表元素都是可单击的。
我的代码按预期工作，但是正如您在 jsFiddle 上看到的，垂直居中有点< em>关闭。
谁能告诉我这是为什么吗？提前致谢。
HTML
<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>
CSS
ul
{
list-style: none;
}
ul
{
height: 100px;
line-height: 100px;
}
li, li a
{
display: inline-block;
}
li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}
li label
{
float: left;
}
li span
{
float: right;
}
I am using the following (simplified) code to vertically center a hyperlink within a UL. I know it may appear strange that I am applying the style to the hyperink rather than the li, but I require the entire list element to be clickable.
My code works just as intended, however as you can see on this jsFiddle the vertical centering is a little off.
Can anyone advise why this is? Thanks in advance.
HTML
<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>
CSS
ul
{
list-style: none;
}
ul
{
height: 100px;
line-height: 100px;
}
li, li a
{
display: inline-block;
}
li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}
li label
{
float: left;
}
li span
{
float: right;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
“ul”上的行高是上下移动链接的高度，如果你将其增加到大约 120px，它就会居中。
The line-height on your "ul" is whats moving the link up and down, if you increase it to about 120px it centers it.
删除
li a上的display:inline-block;。演示
Get rid of
display:inline-block;onli a.Demo