navigation menu bar cant be centrally aligned

Question

I am using meganizr mega menu.usually it is available either left-aligned or right-aligned.but for my requirement i tried to make it center-aligned.Here i made an online gist.

On the line No.35 if i remove float:left and give text-align:center to either ul or li, it will be vertical. I tried left:240px; it is in center but its not responsive. I tried solutions on other questions here for a whole day.but could not center-align menu and responsive at same time.can any one help me please?

Answer 1

if you wanna make all menus go center add the following code to .meganizr

text-align: center;

then chenge following code with .meganizr > li class

.meganizr > li {
    position: relative;
    display: inline-block;
    height: 37px;

    border-right: 1px dotted #ccc;
}

demo : http://dabblet.com/gist/6524015

Answer 2

Ok, so I added a <div class="wrap"> and gave it the same styles and meganizer then changed the width on meganizer to 50% (you can set it to whatever you want) and added margin:0 auto to it as well.

Demo:

http://dabblet.com/gist/6523922

Edit///

The div.wrap wraps around the menu.

Answer 3

add text-align: center; to .meganizr

Answer 4

add the following code to .meganizr

margin:0;
padding:0;

demo : http://dabblet.com/gist/6523863

Answer 5

You have to provide a different width (not 100%) for .meganizer + margin: 0 auto;.