CODEWITHSUNDEEP
htmlcss
nellygrl
nellygrl

Reputation: 657

Can't Center My Navigation

I have a navigation bar that has to be 900 pixels wide but the links inside don't necassarily always span the entire width of the bar so I'd like to center the links. The issue is no matter what I try, the links won't center. Here's my CSS:

.center {
    text-align: center;
}
nav {
    width: 900px;
    text-align: center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    margin: 0 auto 20px auto;
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    background: #C0C0C0;
}
nav ul:after {
    content:" \2022 ";
    clear: both;
    display: block;
}
nav ul:last-child:after {
    content:"";
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    text-align: center;
    display: block;
    padding: 20px 15px;
    text-decoration: none;
}
nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 100;
}
nav ul ul li {
    float: none;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}

I tried adding auto margins to the nav id, and the nav ul id to no avail, then I tried wrapping the list in a div with a class that aligns the content in the center, but that didn't work either. Then I tried text-align to no avail. I don't know what to do so any help would be greatly appreciated!

Here's a JDFiddle I've been working with: http://jsfiddle.net/VCKMU/2/

UPDATE: After taking @Adrifts advice and changing the list items from float:left to inline-block, they now align in the center but now all the child items are inline blocks instead of vertical lists. Any ideas?

Updated JSFiddle: http://jsfiddle.net/VCKMU/6/

Upvotes: 1

Views: 276

Answers (2)

Adrift
Adrift

Reputation: 59769

Instead of floating the list-items, just change their display value to inline-block; as you have specified text-align: center; on their containing block.

http://jsfiddle.net/VCKMU/6/

The only problem is that this causes the child items to turn into inline lists when they're supposed to be vertical.

You just need to modify the selector to only target the list-items are the children of the first <ul>: 

.center > ul > li {
display: inline-block;
}

http://jsfiddle.net/VCKMU/8/

Upvotes: 2

Jonathan
Jonathan

Reputation: 9151

I think it should work if you give nav { width: auto; margin: auto; } I usually fool around in the Chrome debugger for issues like this.

Upvotes: 0

Related Questions