Advanced Search

Vertically centre a menu without setting an explicit width

/ Published in: CSS
Save to your folder(s)
Useful bit of CSS to vertically centre a navigation. Good for Pagination.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. #nav {
  3. 	margin: 0 auto;
  4. 	text-align: center;
  5. 	}
  6. #nav li {
  7. 	display: inline;
  8. 	vertical-align: middle;
  9. 	}
  10. #nav li a {
  11. 	display: inline-block;
  12. 	}
  13. </style>
  14.  
  15. <body>
  16. 	<ul id="nav">
  17. 		<li><a href="#"></a></li>
  18. 		<li><a href="#"></a></li>
  19. 		<li><a href="#"></a></li>
  20. 		<li><a href="#"></a></li>
  21. 		<li><a href="#"></a></li>
  22. 	</ul>
  23. </body>

URL: http://csswizardry.com/2011/01/create-a-vertically-centred-horizontal-navigation/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.