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

Question

I created a little test website with UIKit. Now that I messed around with that I wanted to try and create the design without using a pre-made framework. I am having issues with my navbar though.

This is the Original navbar that was created on the UIKit, see how the text is aligned vertically with the middle of the logo.

This is the second image, which is the Navbar i am trying to create, as you can see the text is on the same row as the image, but it is aligned with the top of the image (logo)

I am Trying to make the second image like the first image, the text aligned with the centre of the logo. I have tried "vertical-align: middle;" in my css but it doesn't seem to work... Any ideas?

Here's my code:

 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> 

Thanks in advance!

Answer 1

您可以尝试以下方法：

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