C Burns C Burns - 1 year ago 50
CSS Question

Vertically center an HTML header

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><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></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 Source

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><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>