Vertically center an HTML header

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><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;
}

To clarify, you're asking about **vertical** centering, _not_ horizontal centering? — Ted Goas, Jun 07 '16 at 17:08
Can you post your code in jsfiddle? Or maybe a screenshot of how it appears? Btw, your html code doesn't seem good. — Akhilesh B Chandran, Jun 07 '16 at 17:35

Ted Goas · Accepted Answer · 2016-06-07T17:36:04.860

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>

Not quite, instead of having them in a line, it stacks them on top of each oth — C Burns, Jun 07 '16 at 17:22

score 0 · Answer 2 · answered Jun 07 '16 at 18:03

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><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;

    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;
}

Vertically center an HTML header

2 Answers2

Linked