Vertically Center Various Text in Header? - html

Question

This can probably be fixed insanely easy but I'm just having such a hard time at doing it.
So, I want to make both my name and the navigation bar in the header appear at the center vertically. My current code only makes my name be centered, since it is bold and the font-size is bigger.
This is the code:
HTML:
<div id="header">
<ul>
<div id="header-wrapper">
<div class="header-name">
<li>
<a href="/index.html">
<span class="first"><strong>First</strong></span>
<span class="last"><strong> Last</strong></span>
</a>
</li>
</div>
<div class="header-nav">
<li>
Contact</li>
<li>
Portfolio</li>
<li>
About
</li>
<li>
Home
</li>
</div>
</div>
</ul>
CSS:
#header-wrapper {
width: 960px;
margin: 0 auto;
position: relative;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: orange;
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
}
#header .header-name li {
float: left;
}
#header .header-nav li {
float: right;
vertical-align: middle;
}
#header li a {
font-size: 15px;
display: block;
color: #FFF;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}
#header .header-name li a {
font-size: 22px;
}
#header ul li a .first {
color: #ccc;
}
#header a {
vertical-align: middle;
}

Answer 1

Your HTML is invalid. A ul needs to have an li as direct children. Instead, you have divs as direct children with nested li's
That said, add display: flex; align-items: center; justify-content: space-between; to #header-wrapper to center those elements vertically.
#header-wrapper {
width: 960px;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: orange;
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
}
#header .header-name li {
float: left;
}
#header .header-nav li {
float: right;
vertical-align: middle;
}
#header li a {
font-size: 15px;
display: block;
color: #FFF;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}
#header .header-name li a {
font-size: 22px;
}
#header ul li a .first {
color: #ccc;
}
#header a {
vertical-align: middle;
}
<div id="header">
<ul> <div id="header-wrapper">
<div class="header-name">
<li>
<a href="/index.html">
<span class="first"><strong>First</strong></span>
<span class="last"><strong> Last</strong></span>
</a>
</li>
</div>
<div class="header-nav">
<li>
Contact</li>
<li>
Portfolio</li>
<li>
About
</li>
<li>
Home
</li>
</div>
</div>
</ul>