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

如果你的锚链接是60px高

line-height:60px

应该这样做。

JSFiddle

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

1 个答案: