Html 需要将列表项与 div 的中心对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9877878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
need to align list items to center of div
提问by Brad
I want to align a list of links to be centered within a div.
我想将一个链接列表对齐到一个 div 的中心。
I tried margin: 0 auto, but no luck.
我尝试了保证金：0 自动，但没有运气。
Note: the navigation-wrapper div needs to stay in place, this is just the snippet of html that is of concern.
注意：navigation-wrapper div 需要保持原位，这只是需要关注的 html 片段。
Check http://jsfiddle.net/bkmorse/aaCY7/to see the links that I need to align properly in the div.
检查http://jsfiddle.net/bkmorse/aaCY7/以查看我需要在 div 中正确对齐的链接。
html
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
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;
}?
回答by Sven Bieder
Change your CSS to this. That works out.
将您的 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;
}
回答by sandeep
Margin:autowork with define width.Write like this:
Margin:auto使用定义width.Write 像这样：
#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;
}
check this http://jsfiddle.net/aaCY7/1/
回答by Dennis Fagan
Since your top-navigation ul doesnt have a set width it is actually centered. However the li's within it are not. If you want to see those items centered then
由于您的顶部导航 ul 没有设置宽度，因此它实际上是居中的。然而，里面的 li 不是。如果你想看到这些项目居中，那么
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}
If you want that list centered in the div but still left align the things inside use this
如果您希望该列表在 div 中居中但仍左对齐里面的东西，请使用此
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
width: 300px;
}
or do both if some combination of the two is needed.
或者如果需要两者的某种组合，则两者都做。
回答by Bikram Shrestha
i just need to know the display inline for the li items that woked for me. In case of center align we can add tex-align: center in the main div. In the above case
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}This should worked
我只需要知道为我唤醒的 li 项目的内嵌显示。在居中对齐的情况下，我们可以在主 div 中添加 tex-align: center 。在上述情况下
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}这应该有效
