中心对齐<li>垂直<ul> </ul> </li>

时间:2014-08-11 21:25:31

标签: html css css3 html-lists

我一直在努力解决这个问题几个小时,所以这里有:

我希望我的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>

1 个答案:

答案 0 :(得分:3)

使用reset css文件(更多优化)或者您可以在css中添加:

CSS:

*{
    margin:0;
    padding:0;
}

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