html - 导航栏中的图像打破了垂直居中的文本

Question

我有这个导航栏:

<div id="nav">
 <a href="#">Portfolio</a>
 <a href="#"><img src="assets/zslogoblack.png"></a>
 <a href="#">Contact</a>
</div>

样式如下:

#nav {
 position: fixed;
 width: 100%;
}
#nav a {
 text-align: center;
 display: inline-block;
 width: 33%;
}
#nav a:first-of-type,#nav a:last-of-type {
 line-height: 60px;
}
#nav img {
 height: 60px;
}

这是输出 我需要在一个 60 像素高的固定导航栏内垂直对齐所有内容，但由于某种原因，这并没有发生。我认为问题是由

line-height:60px;

应用于包含图像的 anchor ，因此

#nav a:first-of-type,#nav a:last-of-type {
 line-height: 60px;
}

但这并没有解决问题。非常感谢任何帮助。

Answer 1

尝试添加“display:flex;”到“#nav”:

#nav
    display:flex;
    align-items: center;
}

这是一个工作示例:

#nav {
 position: fixed;
 width: 100%;
 display:flex;
 align-items: center;
}
#nav a {
 text-align: center;
 display: inline-block;
 width: 33%;
}
#nav a:first-of-type,#nav a:last-of-type {
 line-height: 60px;
}
#nav img {
 height: 60px;
}

    <div id="nav">
     <a href="#">Portfolio</a><a href="#"><img src="/" style="background:#000;width:50px;"></a><a href="#">Contact</a>
    </div>