Advanced Search

Centering horizontally variable width menu

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div id="menu">
  2.     <ul class="clearfix">
  3.         <li><a href="#">Home</a></li>
  4.         <li><a href="#">About</a></li>
  5.         <li><a href="#">Products</a></li>
  6.         <li><a href="#">Contact</a></li>
  7.     </ul>
  8. </div>
  9.  
  10. <style>
  11. #menu {
  12.     text-align: center;
  13. }
  14.  
  15. #menu li {
  16.     display: inline;
  17.     float: right;
  18.     background: #000;
  19.     padding: 5px 10px;
  20.     float: left;
  21.     margin: 0 1px 0 0;
  22. }
  23.  
  24. #menu ul {
  25.     display: inline-block; 
  26.    *display: inline; 
  27. }
  28.  
  29.  
  30.  
  31. #menu a {
  32.     color: #fff;   
  33. }
  34.  
  35.  
  36. .clearfix:after {
  37.     content:".";
  38.     display:block;
  39.     height:0;
  40.     clear:both;
  41.     visibility:hidden;
  42. }
  43. .clearfix {display:inline-block;}
  44. /* Hide from IE Mac \*/
  45. .clearfix {display:block;}
  46. /* End hide from IE Mac */
  47. </style>

URL: http://jsfiddle.net/kuyabiye/FJBvj/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.