如何将无序列表居中？

问题描述 投票：0回答：8

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

达到与此相同的结果：

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

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

编辑：也许我的措辞不是最好的...第一段代码已经可以工作了...我需要的是在不使用<div>包装器的情况下完成它，如果这当然是可能的话。漂浮技巧？伪元素技巧？一定有办法的。

html css html-lists
8个回答
115
投票

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

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

</html>



    





      

      
      
      

      

        

          

            

              
8
投票

              
            

          

        

        


使用
list-style-position:inside
：




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


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





    





      

      
      
      

      

        

          

            

              
5
投票

              
            

          

        

        


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



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


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



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

    





      

      
      
      

      

        

          

            

              
3
投票

              
            

          

        

        



现在，将样式添加到 div 类中，并使用以 center 为值的 text-align 属性。



请参阅下面的示例。



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




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

    




      

      
      
      

      

        

          

            

              
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>


    



      

      
      
      

      

        

          

            

              
-1
投票

              
            

          

        

        


这个怎么样？






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

    




      

      
      
      

      

        

          

            

              
-2
投票

              
            

          

        

        


示例：


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


    



      

      
      
      

      

        

          

            

              
-3
投票

              
            

          

        

        

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.