Vertically centering links in a nav menu

**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)

HTML Code:

<!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.