我在顶部有一个 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 中。对齐方式似乎遵循顶部的图像。文字位于中间相对于图像。这不是一个坏主意but我需要整个系统 img-a-a-a-a 垂直居中。目前我填充了它，但是一旦外部 DIV 的高度发生变化，一切都会崩溃。
我究竟做错了什么？
（我发现这个帖子但在这里他们应用表格等。似乎不是最合适的解决方案。也许我错了？
Using 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>Using 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>