CODEWITHSUNDEEP
htmlcsslistalignmentunordered
user818700
user818700

Reputation:

Center Unordered list horizontally

I'm having trouble centering a horizontal un-ordered list that I have on a very basic 'coming soon' page.

You can follow the link to the site and have a look at the code and so on. You'll notice that the horizontal list with the 3 social icons are not quite centered relative to the big header and the email address, seems to be floating to the right a little bit.

Any ideas on how to fix this?

Upvotes: 0

Views: 218

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157334

@Curt answer is right but you need to reset your elements, and you are actually facing this issue because of it

Use this to reset browser default, I always use this instead of CSS Reset stylesheet..

* {
  padding: 0;
  margin: 0;
}

Than you don't need to declare padding-left: 0; for every ul you use on your web page, because browsers set default styles for some elements and hence you are facing this problem

Upvotes: 1

Curtis
Curtis

Reputation: 103348

Set padding-left:0; on your ul element.

This will override the default browser -webkit-padding-start: 40px; which Google Chrome is offsetting the center position. Other browser defaults may vary.

Tested in Google Chrome and this resolves the issue.

Upvotes: 2

Useless Code
Useless Code

Reputation: 12402

Remove the left padding from the .social_list element.

.social_list {
  padding: 0;
}

Firebug makes figuring this kind of problem out much easier as it will show you the padding and margins on elements when you inspect the DOM.

Upvotes: 1

Related Questions