Bild in Navigationsleiste Breaks vertikal zentriert Text

Question

Ich habe diese Navigationsleiste:

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

als so Styled:

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

Hier ist die Ausgabe ich alles, was vertikal innerhalb ausgerichtet werden eine feste Navbar, die 60px groß ist, aber aus irgendeinem Grund passiert das nicht. Ich dachte, das Problem durch

line-height:60px; 

an den Anker angelegt wird, verursacht wurde, die das Bild enthalten ist, daher die

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

Aber das hat beheben das Problem nicht. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Versuchen Sie, 'display: flex;' zu '#nav':

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

Hier ist ein funktionierendes Beispiel:

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