Vertically centering links in a nav menu [Archive]

keyboard

08-15-2013, 04:53 AM

I've been fiddling with some examples I found on the interwebs, and this is my current code: (pretty much copy and pasted)

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

</script>
<style type="text/css">
body {
background-color:#2A2725;
}
#header {
width:1000px;
height:50px;
margin:auto;
margin-top:25px;
margin-bottom:0px;
background-color:#191816;
border-radius:3px 3px 0px 0px;
}
#nav_menu {
vertical-align:middle:
}
#nav_menu ul {
list-style:none;
padding:0;
margin:0;
}
#nav_menu li {
float:left;
margin:0 0.15em;
}
#nav_menu li a {
height:50px;
line-height:2em;
float:left;
width:9em;
display:block;
color:white;
text-decoration:none;
text-align:center;
}
a:active {
background-color:#191816;
}
/* Hide from IE5-Mac \*/
#nav-menu li a {
float: none
}
/* End hide */
#main {
width:1000px;
min-height:500px;
margin:auto;
margin-bottom:25px;
background-color:#1F1D1B;
}

</style>
</head>
<body>
<div id="header">
<div id="nav_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
<div id="main">

</div>
</body>
</html>

I've been trying to vertically center of the 4 links, but have had no success. Any tips?

Beverleyh

08-15-2013, 05:14 AM

So you're wanting to vertically align the ul inside the #nav_menu div?

I'm an iPhone prisoner for the next few hours but is that a colon typo on the end of vertical-align:middle:?

Put display:table-cell; on #menu_nav too and that should improve things.

Beverleyh

08-15-2013, 05:18 AM

This might also help: http://css-tricks.com/centering-in-the-unknown/