0

I've been trying to work this out for hours now, so here goes:

I want my li items to be centered within the ul. For some reason they seem to be aligned right. ie. I want the red dashed box to be centered within the green solid one.

I've tried margin: 0 auto;, text-align:center, etc. with no luck.

Can someone please tell me why this isn't working?

JSFiddle

The code:

.leftbar {
    position: fixed;
    width: 200px;
  }

  #navMenu {        
    margin-top: 30px;
    border: 1px solid blue;
  }

  #navList {
    text-align:center;
    border: 1px solid green;
  }

  #navList li {
    border: 1px dashed red;
  }


</style>


<div class="leftbar">
  <img src="http://goo.gl/kBrNqn">
  <div id="navMenu">
    <ul id="navList">
      <li>HOME</li>
      <li>People</li>
      <li>Places</li>
      <li>Things</li>
      <li>BLOG</li>
      <br/>
      <li>Contact</li>
    </ul>
  </div>
</div>
Joe Bauer
  • 572
  • 1
  • 9
  • 22

1 Answers1

3

Use reset css file (for more optimization) or you can add this in your css :

CSS :

*{
    margin:0;
    padding:0;
}

DEMO : http://jsfiddle.net/rzgn0fLL/1/

Joffrey Maheo
  • 2,919
  • 2
  • 20
  • 23
  • Excellent! Can you tell me why this works? Is this standard practice to include this rule in all stylesheets? What are the default values for these fields if not 0? – Joe Bauer Aug 11 '14 at 21:32
  • 1
    Just so that OP understands, UL elements have an added indent/padding by default. It was made like that so that the bullets will not end up outside the list itself. [SOURCE](http://stackoverflow.com/questions/4781014/unordered-list-ul-default-indent) – IndieRok Aug 11 '14 at 21:33
  • 1
    All browsers add some specific native properties, like padding, margin, ... css reset file reset all tags properties, `*` operator select all tags, it's better and more fast to use reset css file. – Joffrey Maheo Aug 11 '14 at 21:37