将导航栏与徽标中心对齐（图片）

Question

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

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

这是第二个图像，即我正在尝试创建的导航栏，因为您可以看到文本与图像位于同一行，但与图像顶部对齐（徽标）

我正在尝试使第二个图像像第一个图像一样，文字与徽标的中心对齐。 我已经尝试过“ 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;}