Hello! Help please center the menu, now it is on the left side of the page, it is necessary that it be in the middle.

#main-nav { background-color: #294a70; border-bottom: 5px solid #C1CDCD; display: block; float: left; width: 100%; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .main-navigation ul { margin: 0; padding: 0; } .main-navigation ul ul { background: #294a70 none repeat scroll 0 0; box-shadow: 0 1px 2px; display: none; left: 0; margin: 0; min-width: 200px; position: absolute; top: 44px; z-index: 9999; } .main-navigation ul ul ul { left:100%; top: 0; } <div id="main-nav" class="clear-fix"> <div class="container"> <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><i class="fa fa-bars"></i>Menu</button> <div class="wrap-menu-content"> <div class="menu-menu-container"> <ul id="primary-menu" class="menu"> <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-48"><a href="/">menu1</a></li> </ul> </div> </div> </nav> </div> </div>

1 answer 1

For example, using display: inline-block :

 #main-nav { background-color: #294a70; border-bottom: 5px solid #C1CDCD; display: block; float: left; width: 100%; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .main-navigation ul { margin: 0; padding: 0; text-align: center; } .main-navigation ul li { display: inline-block; vertical-align: middle; } .main-navigation ul ul { background: #294a70 none repeat scroll 0 0; box-shadow: 0 1px 2px; display: none; left: 0; margin: 0; min-width: 200px; position: absolute; top: 44px; z-index: 9999; } .main-navigation ul ul ul { left:100%; top: 0; } 
 <div id="main-nav" class="clear-fix"> <div class="container"> <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><i class="fa fa-bars"></i>Menu</button> <div class="wrap-menu-content"> <div class="menu-menu-container"> <ul id="primary-menu" class="menu"> <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-48"><a href="/">menu1</a></li> </ul>

Or so using flex :

 #main-nav { background-color: #294a70; border-bottom: 5px solid #C1CDCD; display: block; float: left; width: 100%; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .main-navigation ul { margin: 0; padding: 0; display: flex; align-items: center; align-content: center; justify-content: center; } .main-navigation ul ul { background: #294a70 none repeat scroll 0 0; box-shadow: 0 1px 2px; display: none; left: 0; margin: 0; min-width: 200px; position: absolute; top: 44px; z-index: 9999; } .main-navigation ul ul ul { left:100%; top: 0; } 
 <div id="main-nav" class="clear-fix"> <div class="container"> <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><i class="fa fa-bars"></i>Menu</button> <div class="wrap-menu-content"> <div class="menu-menu-container"> <ul id="primary-menu" class="menu"> <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-48"><a href="/">menu1</a></li> </ul>