导航栏中的图像破坏了垂直居中的文本答案

【问题标题】：Image in Navigation Bar Breaks Vertically Centered Text导航栏中的图像破坏了垂直居中的文本
【发布时间】：2018-05-02 21:54:02
【问题描述】：

我有这个导航栏：

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

但这并没有解决问题。任何帮助将不胜感激。

【问题讨论】：

标签： html css image navbar vertical-alignment

【解决方案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>

【讨论】：