html - 无法让“li”项目在 div 中居中

Question

我不能让这个列表在包含的 div 中正确居中。它在左侧留下了边距，我尝试了一些东西，但似乎无法改变它。我只是 CSS 新手，所以还在学习中。提前感谢帮助

这是一个更好的例子的jsfiddle：http: //jsfiddle.net/aSmfy/

html

<div id="navContainer">
                        <ul>

                              <li><a href="add_contact.php">Add Contact</a></li>
                              <li><a href="list-contacts.php">List Contact</a></li>    

                        </ul>
                </div>

CSS

#navContainer {
    width: 192px;}

#navContainer ul{
    width: 192px;
    }

#navContainer li{
    list-style-type:none;
    border-top:thin solid white;
    border-bottom:thin solid white;}

Answer 1

ul在您的元素上放置 0 的填充：

#navContainer ul{
    width: 190px;
    padding: 0;
}

http://jsfiddle.net/aSmfy/1/

Answer 2

添加：

margin:0;
padding:0;

到#navContainer ul

和 ：

 text-align:center;

到 #navContainer 里

它应该居中

Answer 3

解决方案一：

#navContainer {
width: 192px;
left: -20%;
position: relative;
}

检查这个 jSfiddle

解决方案二：

#navContainer li{
        list-style-type:none;
    border-top:thin solid white;
    border-bottom:thin solid white;
        margin:0;
        padding:0;
        text-align:center;
}   

检查这个小提琴