trying to float logo in the center and in line with the navigation

Question

First of all I would like to thank everyone here with their help on this project of mine!

I am trying to have the logo for the site be in the middle of the navigation links and dip just a tad below the header. My problem is, when I (almost) achieve this effect, the logo moves over the the right and the navigation links come back together. I have tried many of the solutions on this site for similar problems, but no dice.

Current state of my problem can be found here: 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;
}

And the 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>

Would it be possible to achieve this effect by making it a background of some sort?

Answer 1

Remove position:absolute from nav li a img and add vertical-align:middle to nav li a

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

DEMO