居中列表内容答案

【问题标题】：Centering list content居中列表内容
【发布时间】：2017-02-21 06:11:52
【问题描述】：

为什么我的列表内容没有完全集中在其容器中？我在#nav div 中使用了 text-aline: center，但它似乎仍然会考虑项目符号，即使我使用 list-style-type 使它们不可见：无。我附上了截图。

这是 HTML：

<div id="nav">
    <h2>Sonnet Index</h2>
    <ul>
        <li><a href="#">Book #1</a></li>
        <li><a href="#">Book #2</a></li>
        <li><a href="#">Book #3</a></li>
        <li><a href="#">Book #4</a></li>
        <li><a href="#">Book #5</a></li>
    </ul>
</div>

CSS：

#nav {
    background-color: #ACCCFF;
    float: left;
    width: 200px;
    height: 410px;
    text-align: center;
}

ul {
    list-style-type: none;
}

【问题讨论】：

标签： html css list nav centering

【解决方案1】：

默认ul从左边取60px padding，你可以设置padding-left:0来做这个。

ul {
    padding-left: 0px;
}

【讨论】：

【解决方案2】：

检查代码元素后，左侧填充未设置为 0px，因此它向右移动，您所要做的就是添加 padding-left:0px; 这是fiddle 和代码

#nav {
    background-color: #ACCCFF;
    float: left;
    width: 200px;
    height: 410px;
    text-align: center;
}

ul {
    padding-left: 0px;
    list-style-type: none;
}

<div id="nav">
    <h2>Sonnet Index</h2>
    <ul>
        <li><a href="#">Book #1</a></li>
        <li><a href="#">Book #2</a></li>
        <li><a href="#">Book #3</a></li>
        <li><a href="#">Book #4</a></li>
        <li><a href="#">Book #5</a></li>
    </ul>
</div>

【讨论】：

【解决方案3】：

无序列表默认有一些填充，您可以在浏览器的检查工具中检查它。只需删除该填充。您的 css 会像..

ul {
   list-style-type: none;
   padding-left:0px;
}

【讨论】：

【解决方案4】：

为什么我的列表内容没有完全集中在它的容器中？那是因为你有not changed default properties of ul tag，它们如下所示，

ul  {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px; 
}

一旦您更改为padding:0，您的#nav text-align:center 就可以正常工作并将它们对齐在中心。

#nav {
    background-color: #ACCCFF;
    float: left;
    width: 200px;
    height: 410px;
    text-align: center;
}

ul {
    list-style-type: none;
    padding:0px; /*Add this*/
}

<div id="nav">
    <h2>Sonnet Index</h2>
    <ul>
        <li><a href="#">Book #1</a></li>
        <li><a href="#">Book #2</a></li>
        <li><a href="#">Book #3</a></li>
        <li><a href="#">Book #4</a></li>
        <li><a href="#">Book #5</a></li>
    </ul>
</div>

【讨论】：