Question

我需要在导航中水平对齐徽标和链接。你能发现我出错的地方或我错过的地方吗？！

文字链接似乎位于底部，我希望让它们向上移动，但无法实现此目的。任何建议将不胜感激。

请帮忙。

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;
}

Answer 2

您可以使用设置为vertical-align:middle;元素的<li>属性来解决。

检查此 demo jsFiddle

CSS

nav li{
    display:inline;
    text-align:center;
    vertical-align:middle;      // <--- Add this in property
}

我在jsFiddle演示中将字体颜色#FFF更改为＃000。所以你可以为自己充电。希望这能帮到你！

水平中心徽标＆amp;李元素

2 个答案:

CSS