如何中心的垂直導航

Question

這是我想達到http://tinyurl.com/qjsqmnp

我只希望使用CSS和HTML的外觀。我已經做了很多的研究和嘗試了很多東西的地獄，但似乎沒有任何工作:(它只是停留在那左上角

這裏是我的jsfiddle：http://jsfiddle.net/g1r6esr7/ CSS：

ul { 
text-align: left; 
font-size: 16px; 
height: 20%; 
} 

li { 
list-style-type: none; 
height: 20%; 
text-align: left; 
} 

ul a { 
text-align: left; 
padding-left: 5px; 
padding-right: 5px; 
text-decoration: none; 
color: #FFF; 
} 

ul a:hover { 
color: #7C5FC4; 
} 

Answer 1

訣竅是把你想要一個驗證display: table-cell; vertical-align: middle;，本身驗證display: table; height: 100% (or whatever percentage you like); position: fixed;父元素中的元素內垂直居中元素：

jsfiddle link

HTML：

<div class="container">    
    <div class="centered"> 
     <ul class="nav"> 
      <li><a href="index.php?<?php echo "sheet=" . $kiescss; ?>">home</a></li> 
      <li><a href="info.php?<?php echo "sheet=" . $kiescss; ?>">info</a></li> 
      <li><a href="work.php?<?php echo "sheet=" . $kiescss; ?>">work</a></li> 
      <li><a href="hku.php?<?php echo "sheet=" . $kiescss; ?>">hku</a></li> 
      <li><a href="contact.php?<?php echo "sheet=" . $kiescss; ?>">contact</a></li> 
     </ul> 
    </div> 
</div> 

CSS：

.container { 
display: table; 
position: fixed; 
height: 100%; 
} 

.centered { 
display: table-cell; 
vertical-align: middle; 
} 

Answer 2

我已經reforked了的jsfiddle，我認爲，這應該是一個工作。

http://jsfiddle.net/ym88m216/

<ul class="nav"> 
     <li><a href="index.php?<?php echo "sheet=" . $kiescss; ?>">home</a></li> 
     <li><a href="info.php?<?php echo "sheet=" . $kiescss; ?>">info</a></li> 
     <li><a href="work.php?<?php echo "sheet=" . $kiescss; ?>">work</a></li> 
     <li><a href="hku.php?<?php echo "sheet=" . $kiescss; ?>">hku</a></li> 
     <li><a href="contact.php?<?php echo "sheet=" . $kiescss; ?>">contact</a></li> 
    </ul> 



html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    font-family: 'Avenir', sans-serif; 
    background-color: #C9B5ED; 
    color: #fff; 
} 

header { 
    position: fixed; 
    height: 100%; 
    width: 7%; 
    top: 0px; 
    float: left; 
    display: table-cell; 
    text-align: center; 
} 

ul { 
    text-align: center; 
    font-size: 16px; 
    height: 20%; 
    width: 100px; 
} 

li { 
    list-style-type: none; 
    height: 20%; 
} 

ul a { 
    text-align: left; 
    padding-left: 5px; 
    padding-right: 5px; 
    text-decoration: none; 
    color: #FFF; 
} 

ul a:hover { 
    color: #7C5FC4; 
} 

a{ 
    text-decoration: none; 
    color: #7C5FC4; 
} 

a:hover { 
    color: #7C5FC4; 
}