Question

我需要在html页面中创建一个列表，并使用CSS将其置于中心。

这是一个我想要的形象：

enter image description here

小块列表应位于中心，所有实心子弹和文本左对齐，但块本身仍应位于中心。我创建了我的列表和我想要的缩进，整个列表保持对齐。

基本上我希望列表位于页面的死点，子弹全部保持正确对齐，两个圆形子弹略微缩进。

我该怎么做！？

我正在尝试div使用margin-left/right设置为auto，但没有运气。

Answer 1

你试过margin:0 auto; 通常这可以使东西成为中心。

Answer 2

你可以这样做：

HTML

<div id="container">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>
            <ul>
                <li>One</li>
                <li>Two</li>       
            </ul>
        </li>
        <li>Three</li>
    </ul>
</div>

CSS

#container{
    width:45%;
    border:1px solid red;
    padding:1em;
    margin:0 auto;
}

示例：http://jsfiddle.net/7rrzZ/1/

当然，你不需要边框，你需要玩子弹，但你明白了。

Answer 3

这种方式完全集中在一起：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <style>
        body { text-align: center; }
        div { display: inline-block; }
        li { text-align: left; }
      </style>
    </head>
    <body>
       <div> 
         <ul>
           <li>text
              <ul>
                 <li>indented text</li>
                 <li>indented text</li>
              </ul>
           </li>
           <li>text
             <ul>
               <li>indented text</li>
               <li>indented text</li>
            </ul>
          </li>
         </ul>  
       </div>
    </body>
</html>

Answer 4

对我来说，它的工作原理是在 CSS 中将 padding-left 添加到包含列表的 div 元素。我使用了百分比（在我的例子中是 44%）。您可以根据文本的长度调整百分比。我不需要再将列表居中。

需要将列表集中在网页的中心

4 个答案: