Centering CSS menu inside div

Question

I have seen many questions on this topic but I can't seem to figure out what I am doing wrong still. I want to make the menu centered inside of the "menu" div so that it will always be center no matter the screen size/browser.

Here is what I have for my HTML and CSS:

 .site-navigation { display: block; font-family: 'Georgia'; font-size: 18px; font-weight: bold; position:relative; margin-left:auto; margin-right: auto; } .site-navigation ul { background: #202020; list-style: none; margin: auto; padding-left: 0; } .site-navigation li { color: #d29500; background: #202020; display: block; float: left; margin: 0 2px 0 0; padding: 12px; position: relative; text-decoration: none; text-transform: uppercase; } .site-navigation li a { color: #d29500; text-decoration: none; display: block; } .site-navigation li:hover { @include transition(background, 0.2s); background: #000000; cursor: pointer; } .site-navigation ul li ul { background: #000000; visibility: hidden; float: left; min-width: 150px; position: absolute; transition: visibility 0.65s ease-in; margin-top:12px; left: 0; z-index: 999; } .site-navigation ul li:hover > ul, .site-navigation ul li ul:hover { visibility: visible; } .site-navigation ul li ul li { clear: both; padding: 5px 0 5px 18px; width: 100%; } .site-navigation ul li ul li:hover { background: #000000; } 

 <div id= "menu"> <div class="site-navigation" > <ul class="menu"> <li class="menu-item"><a href="#">Home</a></li> <li class="menu-item"><a href="#">About Us</a> <ul class="dropdown"> <li class="menu-item sub-menu"><a href="#">Location</a></li> <li class="menu-item sub-menu"><a href="#">Contact</a></li> </ul> </li> <li class="menu-item"><a href="#">Schedule</a></li> <li class="menu-item"><a href="#">Roster</a></li> <li class="menu-item"><a href="#">Alumni Corner</a></li> <li class="menu-item"><a href="#">Gallery</a></li> <li class="menu-item"><a href="#">Support</a></li> </ul> </div> </div> 

Any help would be appreciated!

Answer 1

Simply add

#menu
{
    display: flex;
}

and it should solve your problem (make sure this is supported on all browsers you need, though)

Answer 2

If you want to center an element with margin: 0 auto , it needs to have a set width. You can make it responsive by using percentages .

Answer 3

You can use flexbox as proposed by Jesse, but I would simply go with the good old display: inline-block; property. If you want to support IE10, you cannot use flexbox (see http://caniuse.com/#feat=flexbox )

1. Remove background: #202020; and add text-align: center; to .menu
2. Remove float: left; and change display: block to display: inline-block in .menu-item

The margin between the .menu-item s is now larger because of the space character, which is induced by the inline-block property.

Answer 4

从.site-navigatioin li选择器中删除float：left规则，并将li的display属性设置为inline-block： http : //prntscr.com/8rqehz注意IE7不支持inline-block属性。