HTML 工具栏按钮定位

Question

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

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

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

无标志：

这是一个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;
}

我已经在提供的 fiddle 中尝试过它并且有效。

Answer 3

你为什么不使用 flexBox？

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

HTML 工具栏按钮定位

HTML toolbar button positioning

html

css

position