Centering My CSS Menu

Question

I have tried everything when it comes to centering my CSS menu in the middle of the page.

You can see the CSS Menu at www.eyewitnesssurveillance.com

Can someone please help me center this menu on the page? Thanks!

Here is the CSS Code I am using:

.top-menu-wrap {
margin:     40px 0px 0 0px;
padding:    0;
z-index:    1;
position: relative;
margin: auto;


}

.top-menu-center {
position: center;
text-align: center;

}

.menu-toggle {
width:40px;
height:40px;
text-indent:-99999px;
cursor:pointer;
position:absolute;
opacity:1;
top:0px;
right:15px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;

}

.menu-toggle:hover {
opacity:1;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;
}

.menu-toggle-off {
background: url(../../images/menu/menu_toggle.png) 0 top;}

.menu-toggle-on {
background: url(../../images/menu/menu_toggle.png) 0 bottom;}

.homemenu { 
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
padding:        0;
margin:         0;
height:         85px;
background: url(../../images/gradients/white_to_fade.png) repeat-y right top;
overflow:hidden;


}

.homemenu a { color:#666; text-decoration:none;}

.homemenu ul li {
background:#fff;
background: rgba(255,255,255,0.7);
overflow:hidden;
}

Answer 1

If you include your html or can provide any fiddle for it, than it will be more helpful. Apart you can use this type of external div to ceter it.

<div class="main-container">
<div class="container">
<!-- your menu code-->
</div>
</div>

/*css*/
.container{ width:1000px; margin:0 auto;}

Answer 2

Couple things you can do to center. If you can use a static width you can do something like:

.homemenu { width: 960px; margin: 0 auto; }

You could also have a wrapper div around your menu with css styled as such:

.homemenu-wrapper { text-align: center; }

Another option you might want to investigate is to maybe used some nice scaffolding/grid like that which is found in Twitter Bootstrap. I would encourage you to look at it or something similar which can be quite helpful in positing things.