Centralizing right inside a list (ul)

You can insert the image into one of the <li> and then use position and top to adjust the position of that element.

As you suggested you have a specific class in this element is useful. So the HTML would be:

<div class="nav">
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li class="logo"><a href=""><img src="/favicon.png"/></a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
    </ul>
</div>    

and important CSS:

.nav ul li{
    float: left;
}
.logo {
    position: relative;
    top: -10px;
}

jsFiddle: link

I have an example in CodePen link using Bootstrap and SCSS, but I leave some alerts:

I would use the nav-pills to be able to space the last li of the first part (: nth-child (2)) and leave the logo outside the LI, the only reason is the responsiveness, it is difficult to treat the menu when it has a element that does not belong to it!

The form covered is also not the best, I particularly only use position: absolute in extreme matters!

Anyway, it's the code and the tip:)

Hugs