Vertical-align: middle not working? - html

Question

Why isn't the vertical-align: middle; not working on my h1? The ul isn't aligning with the h1 and it should.
#logo {
color: white;
display: inline;
vertical-align: middle;
}
ul {
padding: 20px;
background: rgba(0,0,0,.5);
}
#title {
position: absolute;
text-align: center;
color: white;
font-size: 50px;
top: 100px;
}
#navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: url('../img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 600px;
}
li {
float: right;
display: inline;
}
li a {
display: inline;
padding: 10px 10px 10px 20px;
text-decoration: none;
color: white;
}
<div id="navbar">
<ul>
<h1 id="logo">Jordan Baron</h1>
<li>About Me</li>
<li>Contact</li>
<li>Projects</li>
</ul>
<h1 id="title">Freelance Web Developer</h1>
</div>

Answer 1

Because vertical-align only applies to inline and table-cell elements, not block-level elements.
In order to have your links line up with your header, you need to assign a line-height equal to the height of the header element (35.33px):
li {
line-height: 35.33px;
}
#logo {
color: white;
display: inline;
vertical-align: middle;
}
ul {
padding: 20px;
background: rgba(0, 0, 0, .5);
}
#title {
position: absolute;
text-align: center;
color: white;
font-size: 50px;
top: 100px;
}
#navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: url('../img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 600px;
}
li {
float: right;
display: inline;
line-height: 35.33px;
}
li a {
display: inline;
padding: 10px 10px 10px 20px;
text-decoration: none;
color: white;
}
<div id="navbar">
<ul>
<h1 id="logo">Jordan Baron</h1>
<li>About Me</li>
<li>Contact</li>
<li>Projects</li>
</ul>
<h1 id="title">Freelance Web Developer</h1>
</div>
It's also worth noting that having a <h1> element as a child of <ul> is invalid syntax. Only <li> elements shouold be a child of <ul>. What you should do is bring the title out of the <ul>, and float the entire <ul> element to the right.
Hope this helps! :)

Answer 2

Ready for a bit of a mind flip?
Here comes FLEXBOX! This could be done "better" but I didn't want to change your html structure: https://jsfiddle.net/ohbffjjm/
#navbar {
background-color: pink;
}
#logo {
margin-right: 150px;
align-self: flex-start;
}
ul {
display: flex;
align-items: center;
list-style-type: none;
}
li a {
padding: 10px 10px 10px 20px;
text-decoration: none;
color: white;
}
<div id="navbar">
<ul>
<h1 id="logo">Jordan Baron</h1>
<li>About Me</li>
<li>Contact</li>
<li>Projects</li>
</ul>
</div>

Answer 3

And a flexbox solution with a few html improvements and improvisations.
body {
margin: 0;
}
header {
color: white;
background: rgba( 0, 0, 0, 0.5 );
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header,
ul {
display: flex;
align-items: center;
justify-content: space-between;
}
h1,
h2 {
margin: 0.5rem 0;
}
h1 {
padding: 0 20px;
}
h2 {
text-align: center;
}
ul {
padding: 0 10px;
}
li {
padding: 10px;
}
li a {
color: white;
text-decoration: none;
transition: color 350ms ease-in-out;
}
li a:hover {
color: gold;
}
<header>
<h1 id="logo">Jordan Baron</h1>
<ul>
<li>About Me</li>
<li>Contact</li>
<li>Projects</li>
</ul>
</header>
<main>
<h2>Freelance Web Developer</h2>
</main>