1

这是 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; 它甚至不移动一个像素。我尝试了很多不同的方法，但它总是会破坏事物并使设计看起来像我周日早上的脸。

请问如何将这些垂直居中？

提前致谢 ：）

4

1 回答 1

2

如果你的锚链接是 60px 高

line-height:60px

应该这样做。

JSFiddle

于 2013-10-11T11:10:36.073 回答