中间有图片的列表

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

但您现在需要调整边距（顺便说一句，第一次来这里）fiddle，当上面有很多人时.. 很奇怪

中间有图片的列表

List with image in between

html

css

image

alignment

vertical-alignment