list-style-position:inside

Question

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

获得与此相同的结果：

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>左对齐（没有父div包装器）的同时将<li>居中呢？

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

编辑：也许我的措辞不是最好的...第一段代码已经有效......我需要做的是没有 { {1}}包装，如果可能的话。漂浮技巧？伪元素技巧？必须有办法。

Answer 1

ul { display:table; margin:0 auto;}

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

Answer 2

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>

Answer 3

要居中对齐无序列表，您需要使用CSS文本align属性。除此之外，还需要将无序列表放在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

Answer 4

假设列表为：

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

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

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

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

Answer 5

list-style-position:inside

使用list-style-position:inside：

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

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

Answer 6

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

Answer 7

从您的帖子中我了解到您无法设置宽度

这么重吗？

<ul>
    <li>Hello</li>
    <li>Hezkdhkfskdhfkllo</li>
    <li>Hello</li>
</ul>

<强> 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.*/
}

这是一个演示。 http://codepen.io/anon/pen/HhBwx

Answer 8

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

如何集中无序列表？

8 个答案:

list-style-position:inside