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,521
    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,970
    Thanks
    16
    Thanked 307 Times in 305 Posts
    Blog Entries
    11

    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,970
    Thanks
    16
    Thanked 307 Times in 305 Posts
    Blog Entries
    11

    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
  •