如何將ul元素帶到div的中心？ CSS

Question

我有一個div，其中我需要該div中心的內部列表。 我可以通過指定寬度和做邊緣0自動，但 我需要使它動態，即使我從列表中刪除1元素，它會出現在div的中心。或者，如果我添加其他元素，它會保持中心對齊屬性。我怎麼做？

小提琴： https://jsfiddle.net/ucxdfmpc/1/

<div class="counter-wrapper"> 
     <div class="counter-inner clrfix"> 
      <ul> 
      <li> 
       <span class="counter-image first"></span> 
       <span class="counter-number">4</span> 
       <span class="counter-text">CREATIVES</span> 
      </li> 
      <li> 
       <span class="counter-image second"></span> 
       <span class="counter-number">6</span> 
       <span class="counter-text">CODERS</span> 
      </li> 
      <li> 
       <span class="counter-image third"></span> 
       <span class="counter-number">4</span> 
       <span class="counter-text">DESIGNERS</span> 
      </li> 
      <li> 
       <span class="counter-image fourth"></span> 
       <span class="counter-number">2</span> 
       <span class="counter-text">WORKERS</span> 
      </li> 
      </ul> 
     </div> 



    * { 
    padding: 0px; 
    margin: 0px; 
} 
.counter-wrapper { 
    background: #fe6261; 
    padding-top: 37px; 
    padding-bottom: 36px; 
    border-top: 1px solid #fe4e4d; 
    border-bottom: 1px solid #fe4e4d; 
} 

.counter-inner ul{ 
    list-style: none; 
} 
.counter-inner ul li { 
    float: left; 
    width: 14.84375%; /*190px;*/ 
} 

.counter-image { 
    display: block; 
    width: 66px; 
    height: 70px; 
    border-right: 2px solid #fc6867; 
    float: left; 
} 

.counter-image.first { 
    background: url('../images/counter-1.png') 10px 15px no-repeat; 
} 

.counter-image.second { 
    background: url('../images/counter-2.png') 10px 15px no-repeat; 
} 

.counter-image.third { 
    background: url('../images/counter-3.png') 10px 15px no-repeat; 
} 

.counter-image.fourth { 
    background: url('../images/counter-4.png') 10px 15px no-repeat; 
} 

.counter-number { 
    font-family: 'Roboto', sans-serif; 
    font-size: 30px; 
    color: #fd7e7e; 
    float: left; 
    padding: 12px 18px 0px; 
} 

.counter-text { 
    float: left; 
    font-size: 10px; 
    color: #fd7e7e; 
    padding: 4px 18px 0; 
} 

Answer 1

的事情是，你用花車，這將不會清除自己，因此ul元素將不是基於內容動態獲取正確的尺寸。所以把它集中起來有點困難。

使這些列表元素display: inline-block和text-align: center添加到包裝，這是你在做什麼？那麼當然你需要修復背景顏色，但這應該很簡單。但是，無論如何，這些事情都會集中在一起。

https://jsfiddle.net/fnsyshzw/1/

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.counter-wrapper { 
 
    background: #fe6261; 
 
    padding-top: 37px; 
 
    padding-bottom: 36px; 
 
    border-top: 1px solid #fe4e4d; 
 
    border-bottom: 1px solid #fe4e4d; 
 
    text-align: center; 
 
} 
 

 
.counter-inner ul{ 
 
    list-style: none; 
 
} 
 
.counter-inner ul li { 
 
    display: inline-block; 
 
    width: 14.84375%; /*190px;*/ 
 
} 
 

 
.counter-image { 
 
    display: block; 
 
    width: 66px; 
 
    height: 70px; 
 
    border-right: 2px solid #fc6867; 
 
    float: left; 
 
} 
 

 
.counter-image.first { 
 
    background: url('../images/counter-1.png') 10px 15px no-repeat; 
 
} 
 

 
.counter-image.second { 
 
    background: url('../images/counter-2.png') 10px 15px no-repeat; 
 
} 
 

 
.counter-image.third { 
 
    background: url('../images/counter-3.png') 10px 15px no-repeat; 
 
} 
 

 
.counter-image.fourth { 
 
    background: url('../images/counter-4.png') 10px 15px no-repeat; 
 
} 
 

 
.counter-number { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 30px; 
 
    color: #fd7e7e; 
 
    float: left; 
 
    padding: 12px 18px 0px; 
 
} 
 

 
.counter-text { 
 
    float: left; 
 
    font-size: 10px; 
 
    color: #fd7e7e; 
 
    padding: 4px 18px 0; 
 
}

<div class="counter-wrapper"> 
 
      <div class="counter-inner clrfix"> 
 
       <ul> 
 
       <li> 
 
        <span class="counter-image first"></span> 
 
        <span class="counter-number">4</span> 
 
        <span class="counter-text">CREATIVES</span> 
 
       </li> 
 
       <li> 
 
        <span class="counter-image second"></span> 
 
        <span class="counter-number">6</span> 
 
        <span class="counter-text">CODERS</span> 
 
       </li> 
 
       <li> 
 
        <span class="counter-image third"></span> 
 
        <span class="counter-number">4</span> 
 
        <span class="counter-text">DESIGNERS</span> 
 
       </li> 
 
       <li> 
 
        <span class="counter-image fourth"></span> 
 
        <span class="counter-number">2</span> 
 
        <span class="counter-text">WORKERS</span> 
 
       </li> 
 
       </ul> 
 
      </div>