CODEWITHSUNDEEP
htmlcss
elroyz
elroyz

Reputation: 113

cant get 'li' item to center in div

I cant get this list to center properly in a containing div. It's leaving a margin on the left hand side and i have tried a few things but can't seem to change it. i am only new to css so still in the process of learning. appreciate the help in advance

Here is a jsfiddle for a better example: http://jsfiddle.net/aSmfy/

html

<div id="navContainer">
                        <ul>

                              <li><a href="add_contact.php">Add Contact</a></li>
                              <li><a href="list-contacts.php">List Contact</a></li>    

                        </ul>
                </div>

CSS

#navContainer {
    width: 192px;}

#navContainer ul{
    width: 192px;
    }

#navContainer li{
    list-style-type:none;
    border-top:thin solid white;
    border-bottom:thin solid white;}

Upvotes: 0

Views: 55

Answers (3)

NiRUS
NiRUS

Reputation: 4259

Solution one :

#navContainer {
width: 192px;
left: -20%;
position: relative;
}

check this jSfiddle

Solution Two:

#navContainer li{
        list-style-type:none;
    border-top:thin solid white;
    border-bottom:thin solid white;
        margin:0;
        padding:0;
        text-align:center;
}

check this fiddle

Upvotes: 0

Tim Ackroyd
Tim Ackroyd

Reputation: 635

Put a padding of 0 on your ul element:

#navContainer ul{
    width: 190px;
    padding: 0;
}

http://jsfiddle.net/aSmfy/1/

Upvotes: 2

David
David

Reputation: 7525

add:

margin:0;
padding:0;

to #navContainer ul

and :

 text-align:center;

to #navContainer li

and it should center

Upvotes: 1

Related Questions