CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
David Hewitt
David Hewitt

Reputation: 837

How do I center this horizontal list within a fixed div?

I have a UL element containing 4 icons within a div that is using absolute positioning to pull it to the bottom of the screen. That div is contained within a fixed sidebar.

I have used display: inline on the list items to give me a horizontal list.

Here is my code running on bootply to demonstrate the problem I'm having. The 4 icons are offset to the right slightly when they should be central:

http://bootply.com/76539

Other content put in the sidebar has no issues with being central. It's just this list.

I have tried quite a lot of methods of trying to get the icons central within the sidebar and none of them seem to be working. I have tried inline-block and float:left on the list items and seem to be getting the same result.

Can anyone see the mistake here? I'm sure there's something simple I've missed.

Upvotes: 2

Views: 66

Answers (1)

user2711047
user2711047

Reputation: 

#social-icons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Also you wrote text-align: c instead of text-align: center

I also edited your example: link

Upvotes: 2

Related Questions