Vertical align nav in header along with the title - html

Question

I cannot seem to get the navigation to vertical-align: middle; along with the title. Any idea how to fix this issue?
https://jsfiddle.net/ozvmkeaq/
header,
nav {
height: 80px;
}
header {
background-color: #E74C3C;
vertical-align: middle;
}
header nav {
float: right;
list-style: center;
text-transform: uppercase;
color: #ECF0F1;
vertical-align: middle;
}
nav li {
display: inline;
padding: 10px;
}
nav a {
display: inline-block;
text-decoration: none;
}
.title {
float: left;
}
.title h1 a {
color: #ECF0F1;
text-decoration: none;
padding: 15px;
}
<header>
<div class="title">
<h1> HTTP</h1>
</div>
<nav>
<ul>
<li class="active">Home</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
</header>

Answer 1

By adding the following CSS, the links vertically center.
ul { margin: 0; height: 100%; display: table; width: 100%;}
nav ul li { height: 100%; vertical-align: middle; display: table-cell;}
I've also updated your fiddle: https://jsfiddle.net/ozvmkeaq/2/
Basically, you need the combination of table and vertical-align properties to tell the browser you want the content in the middle.
As as an alternative, you can also use flex-box.
display: flex;
align-items: center;

Answer 2

You need to set vertical-align:middle to the list items themselves. I would also set it to the links directly to compensate for any list item padding etc.
For example:
nav ul li, nav ul li a{vertical-align:middle;}
This is because vertical-align sets the position based on the parent element, so you need to set it to the child element (different from properties such as text-align where you can set the style to the parent element to affect the elements within).
See more on vertical align at the W3C vertical-align property guide.
Or Try it here.

Answer 3

Try this
header {
background-color: #E74C3C;
height: 5em;
position: relative;
}
header * {
padding: 0;
margin: 0;
}
header a {
text-decoration: none;
}
header nav, header .title {
display: block;
height: 100%;
}
header .title {
position: absolute;
top: 0;
left: 0;
}
header .title h1 {
position: relative;
top: 0.70em;
}
header .title a {
color: #ECF0F1;
margin: 0 0.5em;
}
header nav {
position: absolute;
right: 0;
top: 0;
padding: 0 0.5em;
}
header ul {
list-style-type: none;
list-style-position: inside;
position: relative;
top: 2em;
right: 0;
}
header ul li {
display: inline-block;
padding-right: 0.25em;
}

Answer 4

update this 2 style and it should do the trick.
nav ul
{
padding: 0px;
margin: 0px;
}
nav li
{
display:inline-block;
padding-right:10px;
padding-left:10px;
line-height: 80px;
background-color: green;
}