Jump to content

How to place a menu in the center of a row?


newcoder1010
 Share

Recommended Posts

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

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

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

  • 7 months later...
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 by Muhammad Nada
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...