How to vertical center ordered list-navigation

Question

I am trying to build a fullscreen website and I am not sure how to make the list items centered vertically in my nav tag/object.

I would like to make it as responsive as possible, so I built it using percentages.

Here is my result at fiddle:

And here is a code snippet:

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

Or is it easier to use an unordered list?

Sorry for my bad english!

possible duplicate of [What's The Best Way of Centering a Div Vertically with CSS](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) — apaul, Jun 21 '14 at 02:35

score 0 · Accepted Answer · answered Jun 21 '14 at 01:36

0

You can just add margin-top:20px to ol. The height isn't going to change, so it should center it in your nav.

Or actually, margin-top: 1.5% works too.

answered Jun 21 '14 at 01:36

bennett_an

1,718
1
16
35

It works with margin-top! I made the navigation with pixels now, because it looks better when the navigation is always the same size. For other resolution I have to make media queries, I guess. Thanks!! Is there a diffrence between
– c00L Jun 21 '14 at 02:19
I don't believe so. They may be handled differently by screen readers though. – bennett_an Jun 21 '14 at 06:57

imbondbaby · Answer 2 · 2014-06-21T02:30:41.530

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

WOW! Took more than 30 minutes to figure this out! All figured out now though! no more ugly padding and its in the middle. Please check the updated demo http://jsfiddle.net/SmEek/36/embedded/result/ — imbondbaby, Jun 21 '14 at 02:31
Thanks for your help!! I did it in another way now, because it looks strange, if there is a diffrent resolution in the browser. When I do the navigation with procentage. I did a fixed size with pixels in the navigation now. Thanks for your time: I hope you learned something and the time was not wasted. Here is my result: http://jsfiddle.net/SmEek/41/embedded/result/ — c00L, Jun 21 '14 at 02:59
Your result looks a little bit of... just a little... with my method.. its coming right in the middle... with yours it is a little off. But I guess that is fixable since using pixels would have made things easier — imbondbaby, Jun 21 '14 at 03:01

How to vertical center ordered list-navigation

2 Answers2