I am facing challenges with aligning elements properly on the navigation bar. I would like the words (home, players, about, contact) to be vertically centered in relation to the heart logo.
Here is how it currently appears:
This is how I want it to look (created using Photoshop):
The current code I am using:
body {
padding: 0;
margin: 0;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
background-color: whitesmoke;
}
.container {
width: 80%;
margin: auto;
}
/* Header */
header {
background: black;
color: whitesmoke;
padding-top: 30px;
min-height: 50px;
border-bottom: #fe1d61 4px solid;
}
header a {
color: whitesmoke;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
header ul {
margin: 0;
padding: 0 0 20px 0;
list-style-type: none;
text-align: center;
}
header li {
display: inline;
padding: 0 100px 0 100px;
height: 30px;
}<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<body>
<header>
<div class="container">
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="players.html">PLAYERS</a></li>
<li>
<a href="index.html"><img src="img/00nation_logo.png" width="60px"></a>
</li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
</body>Apologies if this question has been asked before, but I have searched for a solution and couldn't find one.