間に画像があるリスト

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; 
} 

しかし、あなたは今、あなたのマージン（ところで、ここで1回目） を調整する必要がありますその上に人の負荷がfreakyですそのフィドル、