html - 在 <li> 内对齐 <a>

Question

我正在尝试对齐 <a>里面的标签 <li>但我可以做到垂直。但是 <a> <a> 总是在顶部，我想垂直和水平居中标签

您如何在图像中看到。 我需要 A，但得到 B。

这是HTML

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<ul>​

这是 CSS

ul {
    line-height: 85px;
}

li {
    float: left;
    height: 85px;
    line-height: 85px;
    border: 1px solid red;
}

a {
    height: 40px;
    line-height: 40px;
    width: 40px;
    display: block;
    text-align: center;
    border: 1px solid blue;
}

可以看到jsfiddle

http://jsfiddle.net/Mum5e/

Answer 1

您可以尝试使用 display:table-cell 和 vertical-align:middle。我记得，这是一个跨浏览器的解决方案。

查看此 Fiddle

编辑:固定宽度的 anchor :Fiddle