如何使垂直导航居中答案

【问题标题】：How to center a vertical navigation如何使垂直导航居中
【发布时间】：2016-01-08 14:35:47
【问题描述】：

我只想使用 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;
}

【问题讨论】：

标签： html css center

【解决方案1】：

我已经重新分配了 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;
}

【讨论】：

【解决方案2】：

诀窍是将要垂直居中的元素放在验证 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;
}

【讨论】：

谢谢！这正是我想要的。