垂直居中HTML标头

Question

我似乎无法得到我的标题让标题集中在标题框的中间。 它现在看起来如何，它有新闻，联系人和关于框中​​高高的链接而不是居中。

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 1

在<li>上试试这个：

.li {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

这是如何工作的

编辑：清理了一些不平衡的HTML问题并清理了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> 

Answer 2

这是一个更现代的方法：

https://jsfiddle.net/qq0t46pt/2/

flexbox现在也得到很好的支持，并且更容易实现。

---

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