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

但您现在需要调整边距（第一次来这里顺便说一下），当人们加载它时，这个小提琴是怪异的

列出中间的图像

2 个答案: