Navbar水平 垂直中心

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;

}

我已经把它置于水平中心，但是我该如何将其垂直居中？

我希望您的答案，

谢谢Felix

Answer 1

这是我为类似答案创建的 PEN 。有三种方法可以垂直调整您的内容。根据我的说法，这里最适合的是行高度方法。

Answer 2

有多种方法可以执行此操作，请参阅以下文章：http：//phrogz.net/css/vertical-align/

我最喜欢的方法是使用display: table;（在容器上）和display: table-cell与vertical-align: middle（在项目本身上）结合使用，如此小提琴中所示：

http://jsfiddle.net/g6vxs/

Answer 3

如果只需使用CSS，则需要将其设置为"绝对位置"，"顶部和左侧为50％"，然后将保证金顶和左键设置为-height/height/2 and 2 and 2 - 宽/2。

position: absolute;
top: 50%;
left: 50%;
height: 45px;
margin-top: -22.5px;
width: 440px;
margin-left: -220px;

http://jsbin.com/galapudo/1/edit?html，output

如果要将中心的垂直/水平放置在其他div内，请与位置设置该div：相对;

我希望这对您有帮助。

Answer 4

垂直对齐的单线近似值： .nav {margin-top : 45%;}（我想将其添加为丹尼尔·罗吉（Daniel Rogi）的回答，但我没有足够的声誉...）