CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Issue to horizontally center a menu

I'm trying to center (horizontally) my horizontal menu to the middle of the page but without success. I've put the menu in a container that has margins left and right set to auto, but that doesn't work. Thanks for your help http://jsfiddle.net/nB6x4/

/***** MENU *******/
.menu-container {
    position: absolute;
    top: 20px;
    margin-right: auto;
    margin-left: auto;
  width: 100%;

}

nav {
    float: right;
    margin: 20px auto;
    width: 100%;
}
nav ul {
    margin-right: -4px;
    margin-left: 5px;
    }
nav ul li {
    display: inline-block;
    margin-right: -4px;
    margin-left: 5px;
vertical align: top;
}
nav a {
    padding: 7px 10px;
    text-decoration: none;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0);
    border-radius: 5px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 400;
}
nav a:hover {
    background: rgba(0,0,0,0.25)
}
.activeNav {
    background: rgba(0,0,0,0.25)
}
nav ul li ul {
    position: absolute;
    display: block;
    margin-top: 5px;
    border-radius: 5px;
    border-top-left-radius: 0;
    background: none;
    padding-top: 5px
}
nav ul li ul li {
    display: block;
    float: none;
    margin: 0;
    padding: 0
}
nav ul li ul li a {
    display: block;
    text-align: left;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px rgba(0,0,0,0.33);
    padding: 10px
}
nav ul li ul li a:hover {
    background: rgba(20,150,220,0.5);
    color: white;
    text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
    display: block;
}
.hover span {
    color: rgba(255,255,255,0.9);
    background: rgba(20,150,220,0.5);
    border-radius: 5px;
    position: absolute;
    display: block;
    margin: 5px 0 0 -57px;
    padding: 10px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
}



/**** END MENU ****/

Upvotes: 0

Views: 50

Answers (4)

Michael
Michael

Reputation: 7092

There are a few things you need to re-evaluate.

First of all, an absolutely positioned container can not be centered with margin, as margin: 0 auto; only effects relatively positioned elements.

So the very first thing you need to do is delete the position: absolute; on .menu_container.

.menu-container {
    top: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

Then, with the div relatively positioned, you have the property width set to 100%. This makes the div take up the full amount of width available to it from whatever element is it's parent. Adding margin: 0 auto; doesn't do anything and the left and right sides of the element are already touching the sides of the parent. You can't center something that "fits perfectly" so to speak in it's parent.

So there are a few things you can do. You can shrink the size of the container, say to 80%, and then it will start to center the container element, but not necessarily centering your nav links.

The better option in my opinion is to use text-align: center; to center the LI's since they are using display: inline-block. They retain their block characteristics but are also treated as "normal text" so to speak.

Simply changing the selector to what I have below should be all you need...

nav ul {
    text-align: center;
    margin-right: -4px;
    margin-left: 5px;
    }

JS Fiddle Demo

Upvotes: 0

Mehmet Eren Yener
Mehmet Eren Yener

Reputation: 2036

nav 
{
    float: right;
    margin: 20px auto;
    width: 100%;
    text-align: center;
}

you can simple add text-align center to nav

Here is the Fiddle it is not responsive, because you did not provide a responsive code

Upvotes: 1

Robert Messerle
Robert Messerle

Reputation: 3032

You will need to specify a width in order for margin: 0 auto; to work.

http://jsfiddle.net/nB6x4/3/

Updated CSS:

nav {
    margin: 20px auto;
    width: 624px;
}

Alternatively, you could use text-align: center; along with display: inline-block; to accomplish this with content with an unknown width:

http://jsfiddle.net/nB6x4/4/

nav {
    margin: 20px 0;
    text-align: center;
}
nav ul {
    padding: 0;
    margin-right: -4px;
    margin-left: 5px;
    display: inline-block;
}

Upvotes: 1

echoashu
echoashu

Reputation: 912

Try this Actually you need to make position relative and give it some width initially

.menu-container {
position: relative;
top: 20px;
margin: o auto;
max-width: 800px;
}

Hope this help, else try putting your html

Upvotes: 1

Related Questions