logo标签列表

如何将无序列表居中显示？

htmlcsshtml-listscenter
55

我需要将一个未知宽度的无序列表居中，同时保持列表项左对齐。

达到与下面代码相同的效果：

HTML

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

div { text-align: center; }
ul { display: inline-block; text-align: left; }

除了我的<ul>没有父级div之外。因为我没有固定宽度，所以ul { margin: 0 auto; }无法工作。ul { text-align: center; }不起作用，因为列表项将不再左对齐。那么，在不使用父级div包装器的情况下，如何使此<ul>居中，同时保持<li>左对齐？
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
编辑: 或许我的措辞不太好...第一个代码块已经能用了...我需要的是在没有<div>包裹器的情况下完成它，如果可能的话。浮动技巧？伪元素技巧？一定有办法。
你必须设置 ul 和 li 的宽度，以便让浏览器知道如何将内容居中。 - Raptor
请查看您的代码，http://jsfiddle.net/fNFYr/ - user9371102
是的，我想要那个结果，但不包括父级<div>。 - Sunny
@Sunny 你好，看看我的回答吧。 - Mevin Babu
8个回答
115

ul {
  display: table;
  margin: 0 auto;
}
<html>

<body>
  <ul>
    <li>56456456</li>
    <li>4564564564564649999999999999999999999999999996</li>
    <li>45645</li>
  </ul>
</body>

</html>

9

列表样式位置：内部

使用list-style-position:inside：

ul {
  text-align: center;
  list-style-position: inside;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

5

假设列表是：

<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
</ul>

针对这个例子，如果我理解正确，您希望列表项位于屏幕中央，但是列表项内的文本要居左对齐。实现这一点其实非常简单，您只需要使用一些CSS：

ul {
    display: table; 
    margin: 0 auto;
    text-align: left;
}

它起作用了！以下是所发生的事情。首先，我们说我们只想影响无序列表。然后，我们执行Rafael Herscovici的技巧来使列表项居中。最后，我们将文本对齐到列表项的左侧。

3
为了让无序列表居中对齐，您需要使用CSS文本对齐属性。除此之外，您还需要将无序列表放在div元素内。
现在，添加样式到div类，并使用text-align属性并将其值设置为center。
请参见以下示例。
<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>

以下是参考网站的链接 居中对齐无序列表

1

http://jsfiddle.net/psbu2/3/

如果你想使用自己的列表符号

尝试这样做:

<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>
-1

根据您的帖子，我了解到您无法将宽度设置为您的 li。

这样怎么样？

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.*/
}
<ul>
    <li>Hello</li>
    <li>Hezkdhkfskdhfkllo</li>
    <li>Hello</li>
</ul>

这是一个演示。http://codepen.io/anon/pen/HhBwx
我的问题是我的 ul 没有 div 包装器。 - Sunny
即使没有div包装器也没关系。它仍然会将内容居中对齐。我已经编辑了我的答案。如果您没有div，则UL将占用容器的整个宽度。 - Mevin Babu
@Sunny 刚刚进行了另一个编辑。这应该绝对可以解决你的问题！ - Mevin Babu
-2
如果在文本居中对齐时，点号卡在左侧。您可以从脚本中删除“ul”。
例如：
<!doctype html>
 <html>
    <style>
        div.list {
            text-align: center;
        }
    </style>
    
    <body>
        <div class="list">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </div>
    </body>
</html>
2
这肯定能够工作。但是这是一个严重的反模式，强烈建议每个人都遵循语义化HTML结构。可以通过在ul或ol标签上使用CSS属性list-style: none来实现相同的效果。 - Alyson Maia
-2

通过使用Bootstrap，您可以添加容器类来使其居中。对我非常有效。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接