CODEWITHSUNDEEP
htmlcss
Aristides
Aristides

Reputation: 3905

Why is this nav not perfectly centered?

For some reason, in the following fiddle the nav is not perfectly centered. It's not by much, maybe 3 mm on my monitor, but it has been bugging me why.

http://jsfiddle.net/RMBs6/

Here's a snippet of what I think might be the problematic code (but check the fiddle out too/first):

.wrapper {
    margin: 0 auto;
    margin-top: 3em;
    width: 940px;
    text-align: left;
}

.nav {
    padding: 0px;
    text-align: center;
}

Upvotes: 0

Views: 63

Answers (5)

davidpauljunior
davidpauljunior

Reputation: 8338

Using display: inline-block will mean that your items aren't 'flush' against each other. So having a background will really show this up. I presume that's why you've used the -4px margin on the <a>.

Option 1 - display: inline-block

If you must use display: inline-block then I'd suggest removing the -4px on the <a> and using margin: 0 -2px on the li. That will bring it in on both sides. You can see this working here (note that I took the liberty of making the border only 1 pixel):

http://jsfiddle.net/RMBs6/6/

Option 2 - float

Using float will make the list items flush next to each other. However, using text-align: center on the container won't make it centered now. You'll need to define a width and use margin: 0 auto.

Option 3 - display: table

This is my favourite option. It's a way of making the list items fit perfectly in the container. You won't need to define a width (px or %) on the list items, or the child items. They behave like cells in a table.

http://jsfiddle.net/RMBs6/7/

To show the initial problem clearer (as I understand it), here's a beautiful picture.

enter image description here

Upvotes: 1

Ria Weyprecht
Ria Weyprecht

Reputation: 1275

well as far as I can see, it's not centered about 4px: the 4px you set as negative margin for every link

margin-right: -4px;

getting rid of it and using another method than display:inline-block (float for example) or just remove any white space and line breaks between the list items will do it.

Upvotes: 0

Beep
Beep

Reputation: 2823

Try

 .navigation ul 
{
  list-style: none;
  padding: 0;
  width: 90%;
  margin: 0 auto;
}

and

.wrapper {
  margin: 0 auto;
  margin-top: 3em;
  width: 90%;
  text-align: left;
}

Upvotes: 0

Goose Ninja
Goose Ninja

Reputation: 710

Try putting a max-width on your wrapper

.wrapper {
            margin: 0 auto;
            margin-top: 3em;
            max-width: 940px;
            text-align: left;
        }

Upvotes: 0

wendelbsilva
wendelbsilva

Reputation: 772

It is centered. But it is centering based on the width you specified for the wrapper. Just changed 940px to 500px and it worked nicely here.

If you really want something that work everytime, you can use %.

Something like this:

.wrapper {
  margin: 0 auto;
  margin-top: 3em;
  width: 90%;
  text-align: left;
}

Upvotes: 0

Related Questions