Как центр вертикальной навигации

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