how to bring ul element to the center of the div? CSS

Question

I have a div in which i need the inner list in the center of that div. I can put that in the middle by specifying the width and doing margin 0 auto, but i need to make it dynamic such that even if i remove 1 element from the list, it would appear in the center of the div. Or if i add another element it would maintain the center align property. How do i do that?

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

The thing is, you're using floats, which will not clear themselves, and therefore the ul element will not get the correct dimensions dynamically based on the content. So it's a bit hard centering it.

Make those list elements display: inline-block and add text-align: center to the wrapper, is this what you are after? Then you would need to fix the background color, of course, but that should be easy. But the things will be centered in any case.

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>