Html 如何将无序列表居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19443013/
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
How to center an unordered list?
提问by Sunny
I need to center an unordered list of unknown width, while still keeping the list-items left aligned.
我需要将一个未知宽度的无序列表居中，同时仍然保持列表项左对齐。
Achieve the same result as this:
实现与此相同的结果：
HTML
HTML
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
CSS
div { text-align: center; }
ul { display: inline-block; text-align: left; }
Except my <ul>doesn't have a parent div. ul { margin: 0 auto; }doesn't work because I don't have a fixed width. ul { text-align: center; }doesn't work because the list-items won't be left aligned anymore. So how can I center this <ul>while keeping the <li>s left aligned (without having a parent div wrapper)?
除了我<ul>没有父 div。ul { margin: 0 auto; }不起作用，因为我没有固定的宽度。ul { text-align: center; }不起作用，因为列表项将不再左对齐。那么如何<ul>在保持<li>s 左对齐的同时将其居中（没有父 div 包装器）？
<ul>
<li></li>
<li></li>
<li></li>
</ul>
EDIT: Perhaps my wording wasn't the best... The first block of code already works... what i need is to do it withoutthe <div>wrapper, if that's possible of course. Float tricks? Pseudo element tricks? There must be a way.
编辑：也许我的措辞是不是最好的...第一个代码块已经工作...我需要的是做不的<div>包装，如果这当然是可能的。漂流技巧？伪元素技巧？一定有办法。
回答by Dementic
ul {
display: table;
margin: 0 auto;
}<html>
<body>
<ul>
<li>56456456</li>
<li>4564564564564649999999999999999999999999999996</li>
<li>45645</li>
</ul>
</body>
</html>回答by Timo Jungblut
If it is possible for you to use your own list bullets
如果您可以使用自己的列表项目符号
Try this:
尝试这个：
<html>
<head>
<style type="text/css">
ul {
margin:0;
padding:0;
text-align: center;
list-style:none;
}
ul li {
padding: 2px 5px;
}
ul li:before {
content:url(http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
回答by ROSHAN PARIHAR
To center align an unordered list, you need to use the CSS text align property. In addition to this, you also need to put the unordered list inside the div element.
要居中对齐无序列表，您需要使用 CSS 文本 align 属性。除此之外，您还需要将无序列表放在 div 元素中。
Now, add the style to the div class and use the text-align property with center as its value.
现在，将样式添加到 div 类并使用 text-align 属性，以 center 作为其值。
See the below example.
请参阅以下示例。
<style>
.myDivElement{
text-align:center;
}
.myDivElement ul li{
display:inline;
}
</style>
<div class="myDivElement">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Here is the reference website Center Align Unordered List
这里是参考网站Center Align Unordered List
回答by Mevin Babu
From your post i understand that you cannot set width to your li
从您的帖子中，我了解到您无法将宽度设置为 li
so wt about this ?
这么重？
<ul>
<li>Hello</li>
<li>Hezkdhkfskdhfkllo</li>
<li>Hello</li>
</ul>
css
css
ul{
border:2px solid red;
display:inline-block;
}
li{
display:inline;
padding:0 30%; /* try adjusting the side % to give a feel of center aligned.*/
}
Here's a demo. http://codepen.io/anon/pen/HhBwx
