html - 导航栏水平+垂直居中

Question

如何让这个导航栏水平和垂直居中？

这是我的导航栏的截图:http://puu.sh/7luYN

HTML代码

<div class="content">
    <div class="nav">
        <ul>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Startseite</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Leistungen</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Referenzen</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Kontakt</a></li>
        </ul>
    </div>
</div>

CSS 代码

.nav {
    background-color: #CCCCCC;
    font-family: 'Source Sans Pro', sans-serif;
    height: 45px;
    padding-left: 170px;
}
.content {
    width: 800px;
    height: 500px;
    margin:0 auto;
}

.nav ul li {
    list-style-type: none;
    text-align: center;
    width: auto;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin:0 auto;
}
.nav a {
display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #000000;
text-decoration: none;

我已经让它水平居中了，但我怎样才能让它垂直居中呢？

希望得到您的答复，

谢谢菲利克斯

Answer 1

这是一个 PEN 我创建了一个类似的答案。有 3 种垂直对齐内容的方法。在我看来，最适合这里的是行高法。