試圖在中心浮動標誌並符合導航

Question

首先我要感謝大家在這裏幫助我的這個項目！

我想讓網站的標誌位於導航鏈接的中間，並在標題下方傾斜一點點。我的問題是，當我（幾乎）達到這種效果時，徽標會在右側移動，導航鏈接會一起返回。我已經嘗試了許多類似問題的解決方案，但沒有骰子。

現在我的問題的狀態可以在這裏找到：Site

CSS：

nav { 
    position: fixed; 
    top:0px; 
    left:0px; 
    width: 100%; 
    height: auto; 
    padding: 0px; 
    border-bottom: 4px solid #291e13; 
    background:url(../../img/black_paper.png); 
    background-color:#FFF; 
     -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
    z-index:1; 
    list-style:none; 
    text-align:center; 
    font-family: Conv_goudy_bookletter_1911-webfont; 
    font-weight:bold; 
} 

nav li { 
    display: inline; 
} 

nav li a { 
    display: inline-block; 
    padding: 10px;  
     font-family: 'Oswald', sans-serif;  
     font-size: 16px; 
     text-transform: uppercase; 
     text-decoration: none; 
     color: #fff; 
     vertical-align:central; 
     text-shadow: 1px 2px rgba(0, 0, 0, .2); 
     -webkit-transition: color .3s linear; 
     -moz-transition: color .3s linear; 
     -o-transition: color .3s linear; 
     -ms-transition: color .3s linear; 
     transition: color .3s linear; 
} 


nav li a:hover { 
    color:#F30; 
} 


nav li a img { 
    display:inline-block; 
    position: absolute; 
    top: 25px; 
    margin: 0 auto; 
} 

和HTML：

<div id="headercontainer"> 
     <nav> 
      <ul> 
       <li><a class="homelink anchorLink" href="#home">Home</a></li> 
       <li><a class="aboutlink anchorLink" href="#about">About</a></li> 
       <li><a id="plan9Logo" class="homelink anchorLink" href="#home"><img src="img/logo.png" width="133" height="133"></a></li> 
       <li><a class="menulink anchorLink" href="#menu">Menu</a></li> 
       <li><a class="contactlink anchorLink" href="#contact">Contact</a></li> 
      </ul>    
     </nav> 

    </div> 

是否有可能通過使它達到這種效果某種背景？

Answer 1

取下nav li a imgposition:absolute並添加vertical-align:middle到nav li a

nav li a img { 
display:inline-block; 
top: 25px; 
margin: 0 auto; 
} 

DEMO