CSS mobile navigation not centered vertically, but the previous elements are good

I have a simple navigation with links and a mobile navigation icon what I did with css. For an unknown reason the 'icon' is not centered vertically, it's close to center, but few more pixels missing.

After few hours I realized the item is inline-block, but the text links are inline. I think that's the reason, but why my browser align the inline-block 'icon'?! It looks like the browser tries to center it, but not perfect.. I don't understand why does it happen, can you explain it please?

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>

I did a JSFiddle link: http://ift.tt/1FUp5hA