垂直居中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%); 
} 

how this works

編輯：清理了一些不平衡的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; 
}