List with image in between

Question

I have a horizontal list with 5 items in it, in the center list item I have an image. My question is how do I move my other list items up without the image going up and above the screen. Hard to explain but if you see my fiddle.

Snippet:

ul {
  margin: auto;
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  margin: -70px 55px 30px 55px; /*if I reduce the top margin the image will be cut from the top */
}

.logo img {
  display: inline-block;
  position: relative;
}

<ul>
  <li>This</li>
  <li>This</li>
  <li><img class=" logo" src="http://placehold.it/350x150"></li>
  <li>This</li>
  <li>This</li>
</ul>

Fiddle

Answer 1

Don't use margins - use vertical-align.

See demo below where I use vertical-align: top (the default is baseline):

ul {
  margin: auto;
  text-align: center;
}
li {
  list-style: none;
  display: inline-block;
  vertical-align:top;
}
.logo img {
  display: inline-block;
  position: relative;
  vertical-align:top;
}

<nav>
  <ul>
    <li>This</li>
    <li>This</li>
    <li>
      <img class=" logo" src="http://placehold.it/350x150">
    </li>
    <li>This</li>
    <li>This</li>
  </ul>
</nav>