Question

我只想使用css和html。我已经做了很多研究，尝试了很多东西，但似乎没有任何作用:(它只是卡在左上角。

这是我的傻瓜：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

我已经改编了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 个答案: