I’m having difficulty aligning things correctly on the nav-bar. I want the words (home, players, about, contact) to be vertically aligned to the middle of the heart logo.
This is what it looks like now:
I want it to look like this (did it on Photoshop)
The code I have right now is:
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>
Sorry if there has already been a question made about this same thing, but I tried looking it up and couldn’t find anything.
3
Answers
Try this & change your li CSS:
You can apply vertical-align property on your image to move it to the middle of others.
Try this:
style="vertical-align: middle;"
For that you need to add some more CSS like
Here you can check full Example