Vertically center an HTML header - html

Question

I can not seem to get my header to have the titles centered in the middle of the header box. How it looks now, it has the news, contacts, and about links high up in the box and not centered.
HTML:
<ul>
<li style="float:left"><a class="active" <a onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: red;
}
.active {
background-color: black;
}

Answer 1

Try this on the <li>:
.li {
position: relative;
top: 50%;
transform: translateY(-50%);
}
how this works
EDIT: Cleaned up some unbalanced HTML issues and cleaned up the css:
ul {
list-style-type: none;
margin: 0;
padding: 50px; /* adjust as necessary */
overflow: hidden;
background-color: black;
}
li {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
<ul>
<li>
<a class="active" onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a>
</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>

Answer 2

here's a more modern approach:
https://jsfiddle.net/qq0t46pt/2/
flexbox is also well supported now, and easier to implement.
HTML
<ul>
<li style="float:left"><a class="active"> <a onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a></a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
height: 370px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: red;
}
.active {
background-color: black;
}