Search code examples
cssalignmentcenter

CSS: Align Menu to Center

I am trying to align the menu to center. I have tried putting in text-align: center !important; in various spots but it didn't do anything.

Anyone have any ideas?

Thanks in advance for your help!

.menu_wrapper
width: 88%;
margin: 0 auto;



#main_menu nav ul
position: relative;
padding-left: 2%;
border-top: 1px solid #fff;
border-bottom: 1px solid #FFF;

#main_menu nav ul:after
content: "\0020"; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;

#main_menu nav ul#nav_menu li
cursor: pointer;
display: block;
float: left;
margin-right: 19px;


#main_menu nav ul#nav_menu li a
display: block;
padding: 20px 10px 15px;
font: 11px/1.27em "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.25em;
color: #fff;
z-index: 2;

#main_menu nav ul#nav_menu li.blob
border-bottom: 1px solid #F00;
bottom: -1px;
height: 1px;
padding-bottom: 0;
position: absolute;
z-index: 1;
Solution

  • The best way to centerize your navigation is to put a display: "table" to your main container. This way you will be sure that everything will be centerized.

    .menu_wrapper {
  display: table;
  margin: 0 auto;
}