Список с изображением между

Question

У меня есть горизонтальный список с 5 элементами в нем, в элементе списка центра У меня есть изображение. Мой вопрос заключается в том, как переместить мои другие элементы списка без увеличения изображения и над экраном. Трудно объяснить, но если вы видите мой fiddle.

Отрывок:

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

Не используйте поля - использовать vertical-align.

См демо ниже, где я использую vertical-align: top (по умолчанию 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>

Answer 2

li { 
    vertical-align: middle; 
} 

, но теперь нужно настроить для краев (первый раз здесь кстати) что скрипка, когда нагрузка людей на нее .. причудливая