Пытаясь разместить логотип в центре и в соответствии с навигацией

Question

Прежде всего, я хотел бы поблагодарить всех здесь с их помощью в этом моем проекте!

Я пытаюсь сделать так, чтобы логотип сайта был в середине навигационных ссылок и чуть ниже заголовка. Моя проблема в том, что когда я (почти) достигаю этого эффекта, логотип перемещается вправо и навигационные ссылки возвращаются вместе. Я пробовал многие решения на этом сайте для подобных проблем, но не игра в кости.

Текущее состояние моей проблемы можно найти здесь: Сайт

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

Удалить position:absolute от nav li a img и добавить vertical-align:middle в nav li a

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

DEMO