我該如何集中我的無序列表？

Question

我有一棵從<ul> s和<li> s創建的家族樹，但我已經試過了一切，我似乎無法正確地將整棵樹居中。

我已經嘗試了居中.tree並且在另一個div和中心包裹.tree，但似乎沒有任何工作！

http://jsfiddle.net/V8H6T/4/

HTML：

<div class="tree"> 
    <ul> 
     <li> 
      <a href="chairman"><span class="accent">Chairman/Owner</span><p>Name</p></a> 



      <ul> 
       <li> 
        <a href="financemanager"><span class="accent">Finance &<br> 
        Managing Director</span><span>Name</span></a> 

        <ul> 
         <li><a href="financeteam"><span class="accent">Finance 
         Team</span> <span>Name</span><br></a></li> 

         <li><a href="salesdirector"><span class="accent">Sales 
         Director</span><span>Name</span></a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS：

body { 
    width:100%; 
} 

* {margin: 0; padding: 0;} 

ul { 
    line-height:20px; 
} 

.tree ul { 
    padding-top: 20px; position: relative; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

.tree li { 
    float: left; text-align: center; 
    list-style-type: none; 
    position: relative; 
    padding: 20px 5px 0 5px; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

/*We will use ::before and ::after to draw the connectors*/ 

.tree li::before, .tree li::after{ 
    content: ''; 
    position: absolute; top: 0; right: 50%; 
    border-top: 1px solid #ccc; 
    width: 50%; height: 20px; 
} 
.tree li::after{ 
    right: auto; left: 50%; 
    border-left: 1px solid #ccc; 
} 

/*We need to remove left-right connectors from elements without 
any siblings*/ 
.tree li:only-child::after, .tree li:only-child::before { 
    display: none; 
} 

/*Remove space from the top of single children*/ 
.tree li:only-child{ padding-top: 0;} 

/*Remove left connector from first child and 
right connector from last child*/ 
.tree li:first-child::before, .tree li:last-child::after{ 
    border: 0 none; 
} 

/*Adding back the vertical connector to the last nodes*/ 

.tree li:last-child::before{ 
    border-right: 1px solid #ccc; 
    border-radius: 0 0px 0 0; 
    -webkit-border-radius: 0 0px 0 0; 
    -moz-border-radius: 0 0px 0 0; 
} 

.tree li:first-child::after{ 
    border-radius: 0px 0 0 0; 
    -webkit-border-radius: 0px 0 0 0; 
    -moz-border-radius: 0px 0 0 0; 
} 

/*Time to add downward connectors from parents*/ 
.tree ul ul::before{ 
    content: ''; 
    position: absolute; top: 0; left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; height: 20px; 
} 

.tree li a{ 
    border: 1px solid #ccc; 
    padding: 5px 10px; 
    text-decoration: none; 
    color: #666; 
    font-family: arial, verdana, tahoma; 
    font-size: 13px; 
    display: inline-block; 

    border-radius: 0px; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

/*Time for some hover effects*/ 
/*We will apply the hover effect the the lineage of the element also*/ 
.tree li a:hover, .tree li a:hover+ul li a { 
    background: #E9E9E9; color: black; border: 1px solid #94a0b4; 
} 
/*Connector styles on hover*/ 
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{ 
    border-color:#06C; 
} 

span.accent{ 
    background-color: #113963; 
    display: block; 
    margin: -5px -10px 5px; 
    padding: 5px; 
    color: white; 
    font-weight:bold; 
} 

Answer 1

你在找這個？

Demo

.tree{ 
    width:250px; 
    margin:0 auto; 
} 

Answer 2

這裏是做這件事的一種方式。

添加的包裝div.wrap各地div.tree：

<div class="wrap"> 
    <div class="tree"> 
     <ul> 
      <li> <a href="chairman"><span class="accent">Chairman/Owner</span></a> 

       <p>Name</p> 
       <ul> 
        <li> <a href="financemanager"><span class="accent">Finance &<br> 
        Managing Director</span><span>Name</span></a> 

         <ul> 
          <li><a href="financeteam"><span class="accent">Finance 
         Team</span> <span>Name</span><br></a> 
          </li> 
          <li><a href="salesdirector"><span class="accent">Sales 
         Director</span><span>Name</span></a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

對於CSS，

.wrap { 
    border: 1px dashed blue; 
    text-align: center; 
} 
.tree { 
    border: 1px dotted blue; 
    display: inline-block; 
} 
.tree ul { 
    padding-top: 20px; 
    position: relative; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    border: 1px dashed red; 
    overflow: auto; 
} 

應用display: inline-block到div.tree獲得得到最小的寬度，然後用text-align: center在div.wrap得到水平居中。

我還添加了overflow: auto到.tree ul以在其 塊格式上下文中包含浮動元素。

見演示在：http://jsfiddle.net/audetwebdesign/8gBAV/

這種方法的好處是，你不必specity的.tree的寬度，這將保持佈局多一點靈活的響應。

Answer 3

這裏是小提琴：FIDDLE

<div class="tree"> 
<ul> 
    <li> 
     <a href="chairman"><span class="accent">Chairman/Owner</span></a> 

     <p>Name</p> 

     <ul> 
      <li> 
       <a href="financemanager"><span class="accent">Finance &<br> 
       Managing Director</span><span>Name</span></a> 

       <ul> 
        <li><a href="financeteam"><span class="accent">Finance 
        Team</span> <span>Name</span><br></a></li> 

        <li><a href="salesdirector"><span class="accent">Sales 
        Director</span><span>Name</span></a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

body { 
    position:absolute; 
    width:300px; 
    height:200px; 
    z-index:15; 
    top:50%; 
    left:50%; 
    margin:-100px 0 0 -150px; 

} 

* {margin: 0; padding: 0;} 

ul { 
    line-height:20px; 
} 

.tree ul { 
    padding-top: 20px; position: relative; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

.tree li { 
    float: left; text-align: center; 
    list-style-type: none; 
    position: relative; 
    padding: 20px 5px 0 5px; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

/*We will use ::before and ::after to draw the connectors*/ 

.tree li::before, .tree li::after{ 
    content: ''; 
    position: absolute; top: 0; right: 50%; 
    border-top: 1px solid #ccc; 
    width: 50%; height: 20px; 
} 
.tree li::after{ 
    right: auto; left: 50%; 
    border-left: 1px solid #ccc; 
} 

/*We need to remove left-right connectors from elements without 
any siblings*/ 
.tree li:only-child::after, .tree li:only-child::before { 
    display: none; 
} 

/*Remove space from the top of single children*/ 
.tree li:only-child{ padding-top: 0;} 

/*Remove left connector from first child and 
right connector from last child*/ 
.tree li:first-child::before, .tree li:last-child::after{ 
    border: 0 none; 
} 

/*Adding back the vertical connector to the last nodes*/ 

.tree li:last-child::before{ 
    border-right: 1px solid #ccc; 
    border-radius: 0 0px 0 0; 
    -webkit-border-radius: 0 0px 0 0; 
    -moz-border-radius: 0 0px 0 0; 
} 

.tree li:first-child::after{ 
    border-radius: 0px 0 0 0; 
    -webkit-border-radius: 0px 0 0 0; 
    -moz-border-radius: 0px 0 0 0; 
} 

/*Time to add downward connectors from parents*/ 
.tree ul ul::before{ 
    content: ''; 
    position: absolute; top: 0; left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; height: 20px; 
} 

.tree li a{ 
    border: 1px solid #ccc; 
    padding: 5px 10px; 
    text-decoration: none; 
    color: #666; 
    font-family: arial, verdana, tahoma; 
    font-size: 13px; 
    display: inline-block; 

    border-radius: 0px; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

/*Time for some hover effects*/ 
/*We will apply the hover effect the the lineage of the element also*/ 
.tree li a:hover, .tree li a:hover+ul li a { 
    background: #E9E9E9; color: black; border: 1px solid #94a0b4; 
} 
/*Connector styles on hover*/ 
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{ 
    border-color:#06C; 
} 

span.accent{ 
    background-color: #113963; 
    display: block; 
    margin: -5px -10px 5px; 
    padding: 5px; 
    color: white; 
    font-weight:bold; 
} 

Answer 4

.tree{ 
margin: auto 25%; 
min-width:300px; 
width:50%; 

}

JSFiddle

最小寬度：300px將防止窗口被調整大小時錯位的樹