44

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

达到与此相同的结果：

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; }不起作用，因为列表项将不再对齐。那么如何<ul>在保持<li>s 左对齐的同时将其居中（没有父 div 包装器）？

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

编辑：也许我的措辞不是最好的......第一个代码块已经工作......我需要的是在没有<div>包装器的情况下做到这一点，如果这当然可能的话。浮动技巧？伪元素技巧？一定有办法的。

4

8 回答 8

103 

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

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

</html>

于 2013-10-18T06:44:42.700 回答
4

假设列表是：

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

对于这个例子。如果我理解正确，您希望列表项位于屏幕中间，但您希望这些列表项中的文本位于列表项本身的左侧居中。这样做实际上很容易。你只需要一些 CSS：

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

它有效！这是正在发生的事情。首先，我们说我们只想影响无序列表。然后，我们使用 Rafael Herscovici 的技巧来使列表项居中。最后，我们说将文本对齐到列表项的左侧。

于 2020-10-11T22:38:32.460 回答
2

要居中对齐无序列表，您需要使用 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>

这是参考网站中心对齐无序列表

于 2018-07-17T09:54:28.463 回答
2

列表样式位置：内部

使用list-style-position:inside：

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

于 2021-04-28T16:42:59.563 回答
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>
于 2013-10-18T06:43:33.793 回答
-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

于 2013-10-18T06:50:33.883 回答
-1

以防点卡在左侧，而文本在中心对齐。您可以从脚本中删除“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>
于 2021-03-03T18:44:54.647 回答
-1

通过使用引导程序，您可以添加类容器以使其居中。对我来说效果很好

于 2021-07-11T02:19:45.550 回答