如何在菜单中垂直居中链接？答案

【问题标题】：How to vertically center links in a menu?如何在菜单中垂直居中链接？
【发布时间】：2013-10-19 10:42:54
【问题描述】：

这是 HTML：

    <nav>
        <ul class="menu">
            <li class="li_pc"><a href="#">PC</a></li>
            <li class="li_one"><a href="#">ONE</a></li>
            <li class="li_ps3"><a href="#">PS4</a></li>
            <li class="li_360"><a href="#">360</a></li>
            <li class="li_ps3"><a href="#">PS3</a></li>
            <li class="li_wiiu"><a href="#">WiiU</a></li>
        </ul>
    </nav>

这是 CSS：

nav {
    padding: 0;
    margin: 0;
    widht: 1200px;
    height: 100px;
}

ul li {
    display: inline;
    font-family: Verdana, Geneva, sans-serif;
    float: left; /* IE */
    list-style-type: none;
}

ul li a {
    display: block;
    float: left;
    width: 190px;
    height: 60px;
    padding: 0;
    background-color: transparent;
    color: white;
    text-decoration: none;
    text-align: center;
}

.li_pc a:hover {
    background-color: #cc9a34;
}

.li_one a:hover {
    background-color: #149a14;
}

.li_ps4 a:hover {
    background-color: #040264;
}

.li_360 a:hover {
    background-color: #9cce04;
}

.li_ps3 a:hover {
    background-color: #0406b4;
}

.li_wiiu a:hover {
    background-color: #5c12ac;
}

我的目标是使单元格中的文本垂直居中。我正在使用文本对齐：中心；将其水平居中，但是当我使用 vertical-align:middle;它甚至不移动一个像素。我尝试了很多不同的方法，但它总是会破坏事物并使设计看起来像我在星期天早上的脸。

请问我怎样才能使这些垂直居中？

提前致谢:)

【问题讨论】：

标签： css html menu alignment center

【解决方案1】：

如果你的锚链接是 60px 高

line-height:60px

应该这样做。

JSFiddle

【讨论】：

您好 Paulie_D，感谢您的快速回答！效果很好。
@user2870689 您应该选择左侧的勾选来选择此答案。
完成了 :) 现在我还有一个问题。我可以发表评论吗？
是的，如果您标记 Paulie_D，如果只是一些小问题，他们可能会再次快速回答。如果它与垂直对齐有关，phrogz.net/css/vertical-align 可能会有所帮助
我终于自己找到了答案。谢谢你的链接顺便说一句;）