Results 1 to 3 of 3

Thread: Vertically centering links in a nav menu

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default Vertically centering links in a nav menu

    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?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Replies: 3
    Last Post: 08-30-2010, 09:44 AM
  2. centering an image vertically within a <div>
    By MonteChristo in forum HTML
    Replies: 2
    Last Post: 03-05-2008, 09:55 AM
  3. Links appearing vertically in IE
    By e1seix in forum PHP
    Replies: 3
    Last Post: 09-22-2007, 07:56 PM
  4. Replies: 5
    Last Post: 09-06-2007, 02:55 AM
  5. Can the HV-menu float vertically?
    By todervico in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-10-2005, 12:06 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •