垂直居中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也得到了很好的支持，并且更易于实现。

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