将导航栏对齐到徽标中心（图像）

Question

我用UIKit创建了一个小测试网站。现在我搞砸了，我想尝试在不使用预制框架的情况下创建设计。我的导航栏有问题。

这是在UIKit上创建的原始导航栏，查看文本如何与徽标的中间垂直对齐。

这是我想要创建的Navbar的第二个图像，因为您可以看到文本与图像位于同一行，但它与图像的顶部对齐（徽标）

我正在尝试将第二张图像设置为第一张图像，文本与徽标的中心对齐。我试过“vertical-align：middle;”在我的CSS中但似乎没有用......有什么想法吗？

这是我的代码：

html {
  font-family: monospace;
  font-size: 12pt;
}

body {
  margin: 0;
}

header {
  background-color: honeydew;
}

nav .ul {
  list-style-type: none;
  display: table;
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: left;
  vertical-align: middle;
}

li {
  display: table-cell;
  vertical-align: middle;
}

<header>
  <div class="row">
    <nav>
      <ul class="column small-hidden large-12">
        <li class="column small-hidden large-3">&nbsp;</li>
        <li class="column small-hidden large-1">Yep</li>
        <li class="column small-hidden large-1">Yep</li>
        <li style="float: center;" class="column small-hidden large-1 logo"><img alt="Website Logo" src="img/image.png"></li>
        <li class="column small-hidden large-1">Yep</li>
        <li class="column small-hidden large-1">Yep</li>
        <li class="column small-hidden large-3">&nbsp;</li>
      </ul>
    </nav>
  </div>
</header>

提前致谢！

Answer 1

你可以试试这个：

nav li.img{ vertical-align: middle;}