Image and Ul Li not inline - html

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">Rooms</li>
<li class="left">Dining</li>
<li class="home"><img src="assets/navbarimg.png" height="64.5px" weight="250px"></img></li>
<li class="right">Activities</li>
<li class="right">Book a Stay</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">Rooms</li>
<li class="left">Dining</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">Activities</li>
<li class="right">Book a Stay</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!