2014-03-06 192 views
0

如何居中导航栏水平居中和垂直居中?导航栏水平+垂直居中

这里是我的导航栏的截图: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; 

}

我已经把它居中置于水平位置,但我怎样才能将它居中置于垂直位置?

我希望你的答案,

感谢菲利克斯

回答

0

如果你想只使用CSS,你需要与位置绝对顶成立,并留下50%,设置margin-top和margin-left to -height/2和-width/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:相对的;

我希望这可以帮助你。

1

这是一个PEN我创造了一个类似的答案。有三种方法可以垂直对齐您的内容。根据我的说法,这里最适合的是线高度方法。

0

用于垂直对齐单行近似:.nav {margin-top : 45%;} (我想补充这是丹尼尔Rogi的答案评论,但我没有足够的REPU配点......)