css - 如何垂直居中有序列表导航

Question

我正在尝试构建一个全屏网站，但我不确定如何使列表项在我的导航标签/对象中垂直居中。

我想让它尽可能地响应，所以我使用百分比来构建它。

Here is my result at fiddle :

这是一个代码片段:

HTML:

<div id="main">
</div>
<nav>
    <ol>
        <li><a href="home.php">Home</a></li>
        <li><a href="Info.php">Info</a></li>
        <li><a href="projects.php">Projects</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ol>    
</nav>

CSS:

nav {
width: 100%;
bottom: 0;
left:0;
height: 10%;
position: fixed;
background-color: #333;
}

ol {
margin: 0;
list-style: none;
text-align: center;
vertical-align: middle;
height: 100%;
}

li {
display: inline;
margin-right: 40px;
}

#main {
background-color: #C90;
width: 90%;
height: 80%;
margin: 5% auto;
}

还是使用无序列表更容易？

抱歉我的英语不好!

Answer 1

您可以将 margin-top:20px 添加到 ol 中。高度不会改变，因此它应该在您的 nav 中居中。

或者实际上，margin-top: 1.5% 也有效。