css - 如何在菜单中垂直居中链接？

Question

这是 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;
}

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

请问我怎样才能使它们垂直居中？

提前致谢:)

Answer 1

如果你的 anchor 链接是 60px 高

line-height:60px

应该这样做。

JSFiddle