newcoder1010 Posted March 28, 2017 Share Posted March 28, 2017 Hello, I have this html: <section id="block-system-main-menu" class="block block-system mainmenu"> <h2 class="block-title">Main Menu</h2> <ul class="menu nav"><li class="first leaf"><a href="/timore-md">Home</a></li> <li class="leaf"><a href="we-buy-houses">Houses</a></li> <li class="leaf"><a href="/blog">Blog</a></li> <li class="last leaf"><a href="/faq-page">FAQ</a></li> </ul> </section> mainmenu class takes the entire row. I would like to place the center in the center of mainmenu class. I used this css: .menu { width: 70%; margin-left: auto; margin-right: auto; } Now, menu class is being centered but menu items are floating to left within menu class. I dont see an option to float menu items to center. I would simply like to place the menu items in the center of the row. Please advise. Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2017 Share Posted March 28, 2017 I assume this is a horizontal menu. To center items in a horizontal menu, remove float, set their display to inline-block and then set the text-align of the parent to "center". Link to comment Share on other sites More sharing options...
dsonesuk Posted March 28, 2017 Share Posted March 28, 2017 If you wish to keep float, you can use it along with position: relative; and left: property to get same effect section.mainmenu { overflow: hidden; } .menu.nav, .menu.nav li { float: left; left: 50%; } .menu.nav li { left: -50%; } .menu.nav li, .menu.nav { list-style-type: none; margin: 0; padding: 0; text-indent: 0; } .mainmenu > ul, .mainmenu > ul li { position: relative; } .menu.nav li a {padding: 0 15px;} Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 28, 2017 Author Share Posted March 28, 2017 So far, I tried the first solution. It worked like a magic. I also made a note of the 2nd solution. Thank you much. Link to comment Share on other sites More sharing options...
Muhammad Nada Posted November 5, 2017 Share Posted November 5, 2017 (edited) On 3/28/2017 at 7:16 PM, dsonesuk said: section.mainmenu { overflow: hidden; } .menu.nav, .menu.nav li { float: left; left: 50%; } .menu.nav li { left: -50%; } .menu.nav li, .menu.nav { list-style-type: none; margin: 0; padding: 0; text-indent: 0; } .mainmenu > ul, .mainmenu > ul li { position: relative; } .menu.nav li a {padding: 0 15px;} What is the purpose of "overflow: hidden;" here ? Edited November 5, 2017 by Muhammad Nada Link to comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2017 Share Posted November 5, 2017 You are moving an element 50% left, it will overflow the boundary of the container, if the screen is made smaller scrollbars will show. Overflow: hidden prevents it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now