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

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

这是输出 我需要在60px高的固定导航栏中垂直对齐所有内容，但由于某种原因，这种情况不会发生。我认为这个问题是由

引起的

line-height:60px;

应用于包含图像的锚点，因此

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

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

Answer 1

尝试添加＆＃39; display：flex;＆＃39;到＆＃39;＃nav＆＃39;：

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

这是一个有效的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;