Navigation menu items not vertically centered - html

Question

I have a header with an image and navigation links.
For some reason the menu items are not vertically centered.
.header {
position: relative;
margin-top: 70px;
background: red;
height: 40px;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
float: right;
}
.nav li {
display: inline-block;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Live code: https://jsfiddle.net/f2u97o3m/
I tried to add vertical-align: middle to <ul> and <li> items, But it didn't work.
Why it's not centered and how to center it vertically?

Answer 1

.header {
position: relative;
margin-top: 70px;
background: red;
height: 40px;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
float: right;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
line-height: 40px;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
You need to add 'margin: 0; padding: 0;' to '.nav' and to specify 'line-height: 40px' to th e'li'. I suppose you'll put inside, be sure you add that to them.

Answer 2

Here is a solution to centering your ul it vertically. Instead of height: 40px; which doesn't account for the height of children, using padding: 10px 0; adds padding above and below the children. Also, instead of float: right; this solution uses text-align: right.
.header {
position: relative;
margin-top: 70px;
background: red;
/* height: 40px; */
padding: 10px 0;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
/* float: right; */
text-align: right;
}
.nav li {
display: inline-block;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>

Answer 3

One solution would be to convert your element to a flex container.
Your code would look like this:
.nav {
display: flex;
align-items: center;
height: 100%;
float: right;
}
To create a gap between your list items, you could just add some left and right margin:
.nav li {
margin: 0 0.5em;
}
One thing I noticed, too, is that you don't have any margin/padding resets.
At the top of your CSS, put:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
This helps reduce some of the unexpected complications that might arise from an element's default margin and padding.

Answer 4

You can use flexbox for alignment.
https://www.w3schools.com/css/css3_flexbox.asp
If you want to align then at the center and vertically then type like this
.nav {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
If you want it to align horizontally then you can replace the flex-direction with row like
flex-direction:row;