HTML工具栏按钮定位

Question

所以这是我的问题我在我正在开发的网站的导航栏上有一个徽标，当我添加了徽标时，文本没有垂直居中，但当我删除徽标时，文本居中

＆＃13;

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}
.logohead {
  display: inline-block;
}
.links {
  color: white;
  transition: all .1s ease-in;
  font-family: 'Roboto', sans-serif;
  padding: .8em;
  display: inline-block;
  margin-left: 2%;
}
.links:hover {
  color: lightgray;
}
.navgation {
  display: inline-block;
  background-color: #33414a;
  width: 100%;
  padding: .8em;
}

＆＃13;

<ul class="navgation">
  <li class="links" id="lgo">
    <img class="logohead" src="nl.png">
  </li>
  <li class="links">
    Hello World
  </li>
  <li class="links">
    Hello World2
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

没有徽标：

这是Fiddle

Answer 1

有很多方法可以做到这一点。一种解决方案是使用flexbox：

.navigation{
  display: flex;
  align-items: center;
}

现场演示：https://jsfiddle.net/j2ahjd8w/6/

此处有更多解决方案：https://css-tricks.com/centering-css-complete-guide/

Answer 2

只需将vertical-align: middle;添加到.links，就像这样：

.links {
    color: white;
    vertical-align: middle;
    transition: all .1s ease-in;
    font-family: 'Roboto', sans-serif;
    padding: .8em;
    display: inline-block;
    margin-left: 2%;
    vertical-align: middle;
}

我已经在提供的小提琴中尝试了它并且它有效。

Answer 3

为什么不使用flexBox？

.navgation {
   display: flex;
   align-items: center;
   background-color: #33414a;
   width: 100%;
   padding: .8em;
}