My current dilemma involves the placement of a logo on the navigation bar of my website. When the logo is present, the text is not centered vertically, but when I remove the logo it centers correctly.
* {
margin: 0px;
padding: 0px;
}
.logohead {
display: inline-block;
}
.links {
color: white;
transition: all .1s ease-in;
font-family: 'Roboto', sans-serif;
padding: .8em;
display: inline-block;
margin-left: 2%;
}
.links:hover {
color: lightgray;
}
.navgation {
display: inline-block;
background-color: #33414a;
width: 100%;
padding: .8em;
}<ul class="navgation">
<li class="links" id="lgo">
<img class="logohead" src="nl.png">
</li>
<li class="links">
Hello World
</li>
<li class="links">
Hello World2
</li>
</ul>When the logo is removed:
Check out this Fiddle