css 如何使一个无序列表居中？

jum4pzuy 于 2024-01-09 发布在其他

关注(0)|答案(5)|浏览(134)

我需要将一个宽度未知的无序列表居中，同时仍然保持列表项左对齐。
实现与此相同的结果：

超文本标记语言

<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>的左对齐（没有父div Package 器）？

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

型

编辑：也许我的措辞不是最好的..

css

来源：https://stackoverflow.com/questions/19443013/how-to-center-an-unordered-list

5条答案

按热度按时间

g0czyy6m1#

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

个字符

赞(0）回复(0）举报 2024-01-09

mkh04yzy2#

list-style-position：inside

这可能不符合您的确切要求，但它仍然非常有用：

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

个字符

赞(0）回复(0）举报 2024-01-09

lbsnaicq3#

假设列表是：

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

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

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

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

赞(0）回复(0）举报 2024-01-09

dxpyg8gm4#

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

赞(0）回复(0）举报 2024-01-09

baubqpgj5#

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

字符串

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何使一个无序列表居中？

5条答案

list-style-position：inside

相关问题

热门标签

最新问答