In my nav bar I want my logo text to be centered vertically with the logo. Here's what it looks like right now.
HTML:
<header>
<ul class = "logo">
<img class = "logo-image" src = "images/logo.png" alt = "logo">
<a href="../index.html">Ultimate Tennis Team</a>
</ul>
<nav>
<ul class = "nav-links">
<li><a href="#">Leaderboard</a></li>
<li><a href="#">Scoring</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</nav>
CSS:
.logo {
margin-right: auto;
list-style: none;
display: inline-block;
}
.logo li {
padding: 0px 20px;
}
.logo-image {
cursor: pointer;
height: 50px;
}
I'm new to web development. I've tried a variety of things like spans and table but I couldn't figure out this issue.