居中對齊 <li> 在垂直 <ul>

Question

我已經嘗試解決了幾個小時，所以去了：

我希望我的li物品位於ul中。 由於某些原因，它們似乎對齊正確。 即。 我希望紅色虛線框位於綠色實心框的中央。

我已經嘗試過margin：0 auto ;、 text-align：center等，但是沒有運氣。

有人可以告訴我為什么這不起作用嗎？

JSFiddle

編碼：

.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>

Answer 1

使用reset css文件（以進行更多優化），或將其添加到css中：

CSS：

*{
    margin:0;
    padding:0;
}

演示： http : //jsfiddle.net/rzgn0fLL/1/