列表不会水平居中答案

【问题标题】：List won't center horizontally列表不会水平居中
【发布时间】：2012-12-22 20:12:45
【问题描述】：

有没有人建议为什么这个列表不会水平显示和居中。

当 li 项目实际显示为内联时，我确定居中如下...

谢谢

HTML：

<div id="nav">
<div class="navtable">
<ul id="nav1">
    <li><img src="images/kranznav2.png" alt="kranz"/><a href="index.php">COMPETE</a></li>
    <li><img src="images/thumbnav2.png" alt="thumb"/><a href="score.php">SCORE</a></li>
    <div id="logolist"><li><a href="index.php"><img src="images/logorz.png" width="175em" /></a></li></div>
    <li><img src="images/bagnav2.png" alt="bag"/><a href="index.php">SHOP</a></li>
    <li><img src="images/morenav2.png" alt="more"/><a href="index.php">MORE</a></li>
</ul>
</div>
</div>

CSS：

#nav {
    position:relative;
    background:#ffffff;
    width:100%;
    height:0.2em:
    overflow:visible;
    margin-top:-2em;
    font-family:Cusmyrb;
    font-size:75%;

}

#logolist {
    position:absolute;
    padding-top:2em;
    width:250px;
    left:50%;
    margin-left:-100px;
    margin-top:-7%;

}

#nav a {
    display:block;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#343234;
    text-decoration:none;


}

.navtable {
    display:table;
    margin:0 auto;
}

ul#nav1 {

    min-width:700px;
    list-style:none;
    padding-top:20px;
}

ul#nav1 li {
    display:inline;
}

【问题讨论】：

您的 div 包装 li 不是有效的 HTML。你应该通过像validator.w3.org这样的验证器来运行你的网站。
对于初学者，请将 display: inline 放在 ul 上，而不是 li 上。此外，您不需要ul 前面的#nav。 ID应该是唯一的，所以你不需要限定它。然后将li 浮动到左侧。并且去掉ul里面的div，这是非法的。

标签： html css list position center

【解决方案1】：

添加如下内容：

.navtable {
margin: 0 auto;
width: 90px;
}

你需要为你的导航设置一个固定的宽度，这个例子可以工作。

【讨论】：

如果您检查小提琴，向 .navtable 添加宽度不会水平显示它...

【解决方案2】：

如果您希望 ul#nav1 居中，您只需在其中添加 margin: 0 auto;。

在小提琴中你不会看到这个工作，因为你的包装器 div#nav 设置为宽度 100%，如果你将它设置为 2000px 它应该正确显示它。

希望这会有所帮助:)

【讨论】：