Image and Ul Li not inline

Question

I am designing a hotel website with a fixed navbar. I am having trouble getting the items to be inline with an image item. It's getting quite frustrating.

Here's my HTML

 <nav id="navigation">
   <ul>
    <li class="left"><a href="rooms.html">Rooms</a></li>
    <li class="left"><a href="dining.html">Dining</a></li>
    <li class="home"><a href="index.html"><img src="assets/navbarimg.png" height="64.5px" weight="250px"></img></a></li>
    <li class="right"><a href="activities.html">Activities</a></li>
    <li class="right"><a href="booking.html">Book a Stay</a></li>
  </ul>
 </nav>

and here's my CSS

#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255,255,255,.55);
display: inline-block;
}

#navigation li {
 display: inline-block;
 list-style-type: none;
}

#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}

.left {
display: inline;
}

.home {
display: inline;
}

.right {
display: inline;
}

My code is super basic, so work with me here.

 #navigation ul { text-align: center; position: fixed; width: 100%; max-width: 100%; font-size: 2vh; font-family: 'Raleway', sans-serif; z-index: 100; background-color: rgba(255, 255, 255, .55); display: inline-block; } #navigation li { display: inline-block; list-style-type: none; } #navigation a { text-decoration: none; margin: 0px 75px 0 75px; color: black; font-weight: 600; text-transform: uppercase; display: inline-block; } .left { display: inline; } .home { display: inline; } .right { display: inline; } 

 <nav id="navigation"> <ul> <li class="left"><a href="rooms.html">Rooms</a></li> <li class="left"><a href="dining.html">Dining</a></li> <li class="home"> <a href="index.html"><img src="https://placehold.it/250x65" height="64.5px" weight="250px"></img> </a> </li> <li class="right"><a href="activities.html">Activities</a></li> <li class="right"><a href="booking.html">Book a Stay</a></li> </ul> </nav> 

Answer 1

Live Example I made: https://akainth015.github.io/Inked-Out

Often, you can align things with vertical-align (CSS). However, it is a little counter-intuitive. When you use the vertical-align style, the element it is applied to becomes the standard for the rest of the elements. So, if you have this structure:

 li { display: inline-block; } ul { list-style-type: none; } li img { vertical-align: middle; } 

 <ul> <li>Home</li> <li><img src="https://placehold.it/64x64"></li> <li>About</li> </ul> 

Notice how it is applied to the image, not the the text you want in the center. Good luck!