CODEWITHSUNDEEP
htmlcss
Ogen
Ogen

Reputation: 6709

HTML center an unordered list

I have this code: http://jsfiddle.net/5krBj/

HTML

<div id="main-nav">
    <ul>
        <li> <a href="home.html">Home</a>
        </li>
        <li> <a href="vegetables.html">My Stuff</a>
        </li>
        <li> <a href="documentation.html">Log in</a>
        </li>
        <li> <a href="usabilitytest.html">Register</a>
        </li>
        <li> <a href="login.html">Contact Us</a>
        </li>
    </ul>
</div>

CSS 

#main-nav ul {
    width: 100%;
    list-style: none;
    margin: 10px;
    padding: 0 0 0 30px;
    list-style: none;
}
#main-nav ul li {
    float: left;
    font-size: 13px;
    position: relative;
    z-index: 9999;
    font-weight: bold;
    margin-right: 6px;
}
#main-nav ul li a {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    display: block;
    font-size:20px;
    float: left;
    height: 25px;
    padding: 9px 12px 0;
    text-decoration: none;
    color: #92CD00;
}
#main-nav ul li a:hover {
    text-shadow: 1px 1px black;
    border: 2px solid #266A2e;
    border-style: outset;
    border-radius: 100%;
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 0.3s ease-in-out;
}

I am trying to horizontally align this list in the center of the screen.

I have followed this question but it did not work for me.

Upvotes: 0

Views: 126

Answers (1)

SW4
SW4

Reputation: 71240

You need to add text-align:center to the holding div:

#main-nav{
    text-align:center;
}

Then remove the width from your ul and set display:inline-block so that it is effectively treated as textual content, and subject to the centering applied to the parent. Removing the width, means it can be centered according to its 'natural width'

#main-nav ul {
    list-style: none;
    margin: 10px;
    padding: 0 0 0 30px;
    list-style: none;
    display:inline-block;
}

Demo Fiddle

Upvotes: 3

Related Questions