html - 在 css 上垂直对齐

Question

大家好，我是 css3 的新手，我搜索了几个小时如何在我的导航栏中垂直对齐文本。我已经尝试了在 stackoverflow 上找到的所有解决方案，但无法解决我的问题。所以我想也许这是我的代码本身并决定把它放在这里寻求帮助。

我想知道如何使用 css 垂直对齐我的导航栏。这是我到目前为止所拥有的...

#nav{
    margin:0px;
    padding:0px;
    width:100%;
    height:80 px;
    background-image:url('images/navbar bg.png');
    background-repeat:repeat-x;
    text-align:center;
}

#nav ul{
    margin:0;
    padding:0;
    list-style-type:none; 
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
}

#nav li{
    margin:0px;
    padding:0px;
    float:left;
}

#nav a{
    margin:0px;
    padding:0px;
    width:114px;
    height:80px;
    background-image:url('images/btn.png');
    background-repeat:no-repeat;
    text-decoration:none;
    text-transform:uppercase;
    display:block;
}

我的 html 看起来像这样......

<div id="nav">
    <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#contact">CONTACT</a></li>
    </ul>
</div>

我非常感谢你能给我的任何帮助。

Answer 1

更改 #nav a 链接的 CSS 以使用 display:table-cell; 和 vertical-align:middle;。

jsFiddle example