html - 水平居中标志和 li 元素

Question

我需要在导航中水平对齐 Logo 和链接。你能发现我哪里出错或遗漏了什么吗？!

文本链接似乎在底部，我想让它们向上移动但无法实现。任何建议将不胜感激。

请帮忙。

HTML:

<nav>
    <ul>
    <li>ABOUT</li>
    <li>PORTFOLIO</li>
    <li class="logo"><img src="images/danielmaldonado_logo.svg" width="100px"></li>
    <li>RESUME</li>
    <li>CONTACT</li>
    </ul>
    </nav>

CSS:

ul{
    margin:auto;
    line-height:100px;
}


li.logo{
    display:inline-block;
    line-height:10px;
}

nav li{
    display:inline;
    text-align:center;

}

li{
    color:#FFF;
    font-size:14px;
    font-family: montserrat;
    font-weight:thin;
    letter-spacing:2px;
    margin: 0 15px; 0 0;
    line-height:50px;
}

Answer 1

您必须为图像添加 vertical-align : middle。

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