2015-10-05 125 views
1

导航栏似乎以我的15英寸笔记本电脑为中心。但是,当我在27英寸的Mac上查看它时,它漂浮在左边,并且偏离了中心。我不完全确定如何集中这个,所以它似乎集中在所有显示器上。粘滞导航不会对齐中心

SITE ON SERVER

.navContainter{ 
    width: 960px; 
} 
.nav { 
    height:60px; 
    background-color: rgba(0, 0, 0, 0.7); 
    position: -webkit-sticky; 
    list-style-type: none; 


} 


.nav ul { 
    float: left; 
    margin: 0 auto; 
    padding-left: 0px; 
    padding-top: 10px; 

} 


ul{ 
    display: inline; 
    padding: 0; 





} 

li{ 
    display:inline; 
    padding:5px; 
    font-size: 1.5em; 
    float: left; 
    margin-right: 50px; 
    margin-left: 100px; 
    position: relative; 
    font-family: "Josefin Slab",serif; 

} 



a{ 
    width:60px; 
    color: #fff; 

} 



.sticky { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
} 
<head class="navContainer"> 
<nav class="nav"> 


     <ul> 
      <li><a href="web.html">WEB</a></li> 
      <li><a href="photo.html">PHOTOGRAPHY</a></li> 
      <li><img src="img/demo/_small/logo.png"></li> 
      <li><a href="design.html">DESIGN</a></li> 
      <li><a href="video.html">VIDEO</a></li> 

     </ul> 
     </nav> 

回答

2

对于.nav添加text-align: center;

对于.nav ul除去float: left;和添加display: inline-block;;

+0

呵呵,我正要提出完全相同的方法+1。 – Stickers

+0

谢谢你们的摇滚乐 –