如何使无序列表居中？

Posted 2023-03-29

技术标签:

【中文标题】如何使无序列表居中？【英文标题】：How to center an unordered list? 【发布时间】：2013-10-26 21:42:54 【问题描述】：

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

达到与此相同的结果：

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

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

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

【问题讨论】：

您必须设置ul 和li 的宽度，以便让浏览器知道如何将内容居中。看看你的代码，jsfiddle.net/fNFYr 是的，我想要这个结果，但没有父。 @Sunny Hey 查看我的答案 【参考方案1】：

ul 
  display: table;
  margin: 0 auto;

<html>

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

</html>

【讨论】：

你读过这个问题吗？ “我需要将 unknown 宽度的无序列表居中”... 不，first 行与原始问题中的相同。现在它可以工作了:)，没有父 div，没有强制宽度。好'ol表。完美！ fiddle 没有按预期工作，预期结果应该是这样的 jsfiddle.net/gyQ2W/1 不使用 :before 伪元素。【参考方案2】：

假设列表是：

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

这里是参考网站Center Align Unordered List

【讨论】：

【参考方案4】：

列表样式位置：内部

使用list-style-position:inside:

ul 
  text-align: center;
  list-style-position: inside;

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

【讨论】：

不错！如果您有多行，这是唯一有效的解决方案。谢谢！【参考方案5】：

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>

【讨论】：

【参考方案6】：

从您的帖子中，我了解到您无法将宽度设置为 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 包装器即使您没有 div 包装器也可以。它仍然会将内容与中心对齐。我已经编辑了我的答案。如果你没有 div，那么 UL 将占据容器的整个宽度 @Sunny 刚刚进行了另一次编辑。这绝对可以解决您的问题！【参考方案7】：

如果点卡在左侧，而文本居中对齐。您可以从脚本中删除“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>

【讨论】：

嗯，它肯定会工作。但这是一种严重的反模式，强烈建议每个人都遵循语义 HTML 结构。在ul 或ol 标签上使用CSS 属性list-style: none 可以达到相同的效果。【参考方案8】：

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

【讨论】：

以上是关于如何使无序列表居中？的主要内容，如果未能解决你的问题，请参考以下文章

如何水平居中未知宽度的无序列表？

css 适应“如何在无序列表或div中垂直和水平居中文本”