如何在中间垂直对齐图像和文本？

Question

我在顶部有一个DIV和一些锚点.首先是徽标,其余是文字.我设定的样式如下.

div.nav-top {
  height: 120px;
  vertical-align: middle;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  width: 200px;
  height: 40px;
  display: inline-block;
}

a.nav-link {
  vertical-align: middle;
}

但是,这些元素不以div为中心.对齐似乎遵循图像,它位于顶部.文本相对于图像位于中间.这不是一个坏主意,但我需要整个系统img-aaaa垂直居中.目前我垫它,但一旦外部DIV的高度发生变化,一切都会破裂.

我究竟做错了什么？

(我发现这篇文章,但在这里他们应用表等等.似乎不是最合适的解决方案.也许我错了？

Answer 1

使用Flexbox

nav, .menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
}

li {
  padding: 0 5px;
}

<nav>
  <div class="logo">
    <img src="http://placehold.it/150x50">
  </div>
  
  <ul class="menu">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

使用CSS表

nav, .menu {
  display: table;
}

.logo, .menu {
  display: table-cell;
  vertical-align: middle;
}

li {
  padding: 0 15px;
  display: table-cell;
  vertical-align: middle;
}

<nav>
  <div class="logo">
    <img src="http://placehold.it/150x50">
  </div>
  
  <ul class="menu">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>