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

问题描述：

我创建了一个带有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>

提前感谢！

可以调整里的行高为一个数字，与图像中心吧。这样的屁股线高度：40px左右。让我知道这是否有效。 –

'li垂直对齐：顶部; }' –

是的，这工作表示感谢！但是它会将其他事物推到下面，以任何方式阻止这种事情发生？谢谢！（回复奥兰多体育）我haz kode，这似乎没有影响：/ –

答

你可以试试这个：

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

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

相关推荐