Jump to content
newcoder1010

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

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.

Share this post


Link to post
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".

Share this post


Link to post
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;}

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

×