CODEWITHSUNDEEP
htmlcsshtml-listscenternav
pearljamming
pearljamming

Reputation: 3

CSS/HTML Trying to center nav ul element

I'm just messing around on jsfiddle trying to practice and I came across an issue that I couldn't solve. So hopefully some of you could help me a bit here. This seems like such a silly question on the very basics of CSS but for some reason this one has me.

Basically I created a generic navigation on jsfiddle and I need the ul element centered. I'm not sure why they are stuck on the left side of the screen.

http://jsfiddle.net/jrich/ker1jLdf/

CSS and HTML as follows:

       body {
        background-color: #45859E;
        font-family:'Open Sans', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    ul {
        padding: 0;
        margin: 0 auto;
    }
    a:link {
        text-decoration: none;
    }
    h3 {
        padding: 5px;
        margin: 0;
    }
    header {
        width: 100%;
        background-color: #FFF;
        margin: 0 auto;
        border-bottom: solid 5px #00729B;
    }
    #nav {
        margin: 0 auto;
        padding: 10px 0;
    }
    #nav ul {
        width: 100%;
        margin: 0 auto;
    }
    #nav ul li {
        text-align: center;
        width: 100px;
        display: inline-block;
        border-bottom: solid 5px #00729B;
        color: #000 border-radius: 50px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        margin: 0 auto;
    }
    ul li h3 {
        text-transform: uppercase;
    }
    ul li:hover {
        color: #999999;
        border-color: #00729B;
        background: #ffffff;
        /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(78%, #ffffff), color-stop(78%, #ffffff), color-stop(100%, #00729b));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* W3C */
    }
<body>
    <header>
        <div id="nav">
            <ul>
                <li id="one">
                     <h3><a href="">Home</a></h3>
    
                </li>
                <li>
                    <h3><a href="">About</a></h3>
    
                </li>
                <li>
                     <h3><a href="">Contact</a></h3>
    
                </li>
            </ul>
        </div>
    </header>
    </body>

Thanks!

Upvotes: 0

Views: 408

Answers (5)

connexo
connexo

Reputation: 56754

Set 

#nav ul {
    display: table;
    /* width: 100%; <- remove this */
}

Your code as a working fiddle (except for the :hover styles):

http://jsfiddle.net/ker1jLdf/6/

Upvotes: 0

sonam gupta
sonam gupta

Reputation: 785

Your code is ok. The only thing you forgot to do is you dont aligned the text in center of ul.so just add:text-align:center; in the style of ul.

Upvotes: 0

Usman Arshad
Usman Arshad

Reputation: 868

Adding following line of code will solve your problem

#nav ul {
    text-align: center;
}

http://jsfiddle.net/1qyw86cv/

Upvotes: 0

Karthi Keyan
Karthi Keyan

Reputation: 804

This simple solution just add text-align: center to ul and display: inlin-block for li

ul li {
    color: #000
}
ul {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
ul li  {
    display: inline-block;
    padding: 10px;
}
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

Upvotes: 0

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Add this

ul {
padding: 0;
margin: 0 auto;
text-align:center; 
}

Fiddle

Upvotes: 1

Related Questions