如何将ul元素带到div的中心？CSS

我有一个div,我需要在该div中心的内部列表.我可以通过指定宽度并将余量0自动设置在中间,但我需要使其动态,即使我从列表中删除1个元素,它也会出现在div的中心.或者,如果我添加另一个元素,它将保持中心对齐属性.我怎么做？

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

  

        

          

            

              
              4
              CREATIVES
            
            

              
              6
              CODERS
            
            

              
              4
              DESIGNERS
            
            

              
              2
              WORKERS
            
          
        



     * {
  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;
}

Roope.. 6

问题是,你使用浮动,它不会自行清除,因此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;
}

 

            

              

                

                  
                  4
                  CREATIVES
                
                

                  
                  6
                  CODERS
                
                

                  
                  4
                  DESIGNERS
                
                

                  
                  2
                  WORKERS
                
              
            

* {
  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;
}

 

            

              

                

                  
                  4
                  CREATIVES
                
                

                  
                  6
                  CODERS
                
                

                  
                  4
                  DESIGNERS
                
                

                  
                  2
                  WORKERS