CODEWITHSUNDEEP
csscentering
Kay
Kay

Reputation: 105

css trouble with centering a horizontal unordered list

I have had trouble centering the unordered list I am using for my navigation. I have looked at other advice and tried to fix it so now my code is a hot mess. I cannot figure out for the life of me what is going wrong. All the solutions I have tried still do not center the list in the window. adding the overflow:visable stretch it out but not 100% and it does not expand when the window grows. 

#navbar {
position: fixed;
top:-17px;
margin-bottom: 10px;
font-family:Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;

}

#navbar ul > li {
display: inline-block; 
float: none;
color:white;
font-size: 14px;
margin-right: 35px;
margin-left: 35px;
padding: .2em 1em;
overflow:visible;

}

Upvotes: 1

Views: 863

Answers (5)

Tabetha Moe
Tabetha Moe

Reputation: 480

Is this what you are looking for?

http://jsfiddle.net/talymo/6FGbw/

#navbar {
    position:fixed;
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
    text-align:center;
}

    #navbar li{
        padding:10px;
        display:inline-block;
    }

    <ul id="navbar">
        <li>Thing 1</li>
        <li>Thing 2</li>
        <li>Thing 3</li>
    </ul>

Upvotes: 2

Daniel Imms
Daniel Imms

Reputation: 50149

Assuming your navbar has some set width you can use text-align:center on your ul

jsFiddle

/* Give the navbar a width */
#navbar {
    left:0;
    right:0;
}

#navbar ul {
    padding:0;
    text-align:center;
}

Upvotes: 1

Michael
Michael

Reputation: 7092

Try:

#navbar ul {
text-align: center;
}

JSFiddle: http://jsfiddle.net/zgwxP/

Upvotes: 1

Phillip-juan
Phillip-juan

Reputation: 546

One thing you can try is to put the list inside a div and add the style text-align:center; to the div.

Afterwards just remove the position:fixed; style from #navbar.

or you could wrap the list in <center> </center> tags.

Hope this helps :)

Upvotes: 1

Heckscheibe
Heckscheibe

Reputation: 640

what if you add this to your code:

text-align: center

Upvotes: 1

Related Questions