Question

我想将一个链接列表对齐，以便在div中居中。

我试过保证金：0自动，但没有运气。

注意：导航包装器div需要保持原位，这只是关注的html片段。

检查http://jsfiddle.net/bkmorse/aaCY7/以查看我需要在div中正确对齐的链接。

HTML

<div id="navigation-wrapper">
  <ul id="top-navigation">
    <li><a href="">Home</a></li>
    <li><a href="">Volunteer</a></li>
    <li><a href="">Support</a></li>
    <li><a href="">Educate</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Gift Shop</a></li>
    <li><a href="">Directions</a></li>
  </ul>
</div>

CSS

#navigation-wrapper {
 width:465px;
 border:1px solid red;
}

#top-navigation {
 margin: 0 auto;
 border:1px solid blue;
 padding:5px 0;
}

#top-navigation li {
 display:inline;
 list-style-type:none;
 margin:2;
}

Answer 1

将CSS更改为此。这很有效。

#navigation-wrapper {
 width:465px;
 border:1px solid red;
 margin:0 auto;
 text-align:center;
}

#top-navigation {
 border:1px solid blue;
 padding:5px 0;
}

#top-navigation li {
 display:inline;
 list-style-type:none;
 margin:2;
}

Answer 2

Margin:auto使用定义width。写得像这样：

#navigation-wrapper {
 width:465px;
 margin: 0 auto;
 border:1px solid red;
    text-align:center;
}

#top-navigation {
 display:inline-block;
 border:1px solid blue;
 padding:5px 0;
}

检查此http://jsfiddle.net/aaCY7/1/

Answer 3

由于您的顶部导航ul没有设定宽度，因此实际上居中。然而，其中的李不是。如果你想看到那些项目居中，那么

#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}

如果你想让那个列表居于div中，但仍然保持对齐内部的东西使用这个

#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
width: 300px;
}

如果需要两者的某种组合，请两者兼顾。

Answer 4

我只需知道显示内联的li项目对我有用。如果是中心对齐，我们可以在主div中添加tex-align：center。在上面的例子中 #top-navigation { margin: 0 auto; border:1px solid blue; padding:5px 0; text-align: center; } 这应该有效

需要将列表项对齐到div的中心

4 个答案: