Question

I need help centering my CSS menu. Not sure why it isn't centered. I played around with the padding but it didn't change anything really. I know you just can't center it like you can with HTML though.

Here is the CSS:

Here is the page:

Thank you! -Mike

Was it helpful?

Solution

Try adding margin:auto in the css menu

#cssmenu {
    background: #000000;
    height: 44px;
    position: relative;
    width: 595px;
    margin: auto;
}

FIDDLE

OTHER TIPS

Add margin: 0 auto; to #CssMenu

#cssmenu {
position: relative;
height: 44px;
background: #000000;
width: 595px;
margin: 0 auto;
}
#cssmenu > ul {
  position: relative;
  display: block;
  background: #000000;
  height: 32px;
  width: 100%;
  z-index: 500;
  text-align: center; /*add this to center your li itens*/
  white-space: nowrap; /*add this if you dont want brake the 'HISTORY' link in another line*/

#cssmenu > ul > li {
  display: inline-block; /*you must remove float:left; and add change display to inline-block to display your li items side by side*/
  vertical-align: top; /*add this to make you li itens align by top*/
  position: relative;
  padding: 0;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top