Question

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

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

这是一段代码：

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即可。高度不会改变，因此它应该以{{1}}。

为中心

或者实际上，nav也有效。

Answer 2

的jsfiddle： http://jsfiddle.net/SmEek/36/embedded/result/

/* CSS Document */

/******************************************* 
                Clear body
*******************************************/

body, h1, h2 {
    margin: 0;
    padding: 0;
}


/******************************************* 
                body
*******************************************/

body {
    background-color: #666;
}

/******************************************* 
                p etc
*******************************************/

p {
    height: 90%;
}

/******************************************* 
                Linkss
*******************************************/

a:link {
    font-family: 'Iceland';
    font-style: normal;
    font-size: 30px;
    font-weight: 700;
    text-decoration: none;
    color: #666;
}

a:visited {
    color: #666;
}

a:hover {
    color: #F90;
}

/******************************************* 
                Navigation
*******************************************/

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

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

li {
    display: inline;
    margin-right: 40px;
    text-align: center;
    vertical-align: middle
}

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

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

2 个答案: