Image in Navigation Bar Breaks Vertically Centered Text - html

Question

I have this nav bar:
<div id="nav">
Portfolio
<img src="assets/zslogoblack.png">
Contact
</div>
Styled as so:
#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;
}
Here is the output
I need everything to be vertically aligned within a fixed navbar that is 60px tall, but for some reason, this is not happening. I thought the problem was caused by
line-height:60px;
being applied to the anchor that contained the image, hence the
#nav a:first-of-type,#nav a:last-of-type {
line-height: 60px;
}
But that did not fix the problem. Any help would be very much appreciated.

Answer 1

Try adding 'display:flex;' to '#nav':
#nav
display:flex;
align-items: center;
}
Here is a working example:
#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">
Portfolio<img src="/" style="background:#000;width:50px;">Contact
</div>