html - CSS移动导航没有垂直居中，但是前面的元素都不错

Question

我有一个带有链接的简单导航和一个移动导航图标，这是我用 CSS 所做的。由于未知原因，“图标”未垂直居中，它接近中心，但缺少更多像素。

几个小时后，我意识到该元素是 inline-block，但文本链接是 inline。我想这就是原因，但为什么我的浏览器会对齐 inline-block 'icon'？!看起来浏览器试图将它居中，但并不完美。我不明白为什么会这样，你能解释一下吗？

CSS

.nav-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 100px;
  background: pink;
  position: relative;
}

.nav-buttons li {
  display: inline-block;
}

a {
  position: relative;
  display: inline-block;
  padding: 0 15px;
}

.l-bars {
  position: relative;
  width: 0.9em;
  height: 1em;
  display: inline-block;
}

.l-bars .lines {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.9em;
  height: 0.12em;
  margin-top: -0.06em;
  background-color: red;
}

.l-bars .lines:after, .l-bars .lines:before {
  position: absolute;
  left: 0;
  height: inherit;
  width: 100%;
  background-color: red;
  content: ' ';
}

.l-bars .lines:before {
  top: -6px;
}

.l-bars .lines:after {
  top: 6px;
}

HTML

<ul class="nav-buttons">
  <li><a href=""><i>y</i></a></li>
  <li><a href=""><i>x</i></a></li>
  <li class="bars"><a href=""><i class="l-bars"><span class="lines"></span></i></a></li>
</ul>

我做了一个 JSFiddle 链接:http://jsfiddle.net/6bo0jLL6/

Answer 1

对于每个具有 display: inline-block 的样式；添加此样式... vertical-align: middle;

垂直对齐可用于与表格和行内元素相关的元素。

问题已修复:http://jsfiddle.net/6bo0jLL6/76/

CSS:

.inline-block {vertical-align: middle;}

请看jsfiddle