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


Tags: html,css

Problem :

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


Solution :

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>


    CSS Howto..

    How to get Angular Material Design's directive to scale to image properly in IE?

    How to add class based on which css class name is come in jquery

    How to not make text colored within a href link but the text is also within div?

    How to use sprite image in css?

    How to refresh to top of HTML page using css

    How to set a different main content background for each page in weebly?

    How to show “…” when there's not enough space to view all the text

    How to make different font families appear same size? (computationally)

    How do i hide html until its processed with javascript?

    How do I add a custom CSS image to the target background behind a given layer of text in Squarespace?

    How to size relative div which haven't a content?

    How to expand toggle sidebar more

    How to animate CSS Translate

    Both DIV Popups Shown Instead of One

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    How to get html elements from different class xpath?

    How to determine CSS attribute is set on the element?

    How to make an image display above the background of an :after element

    css not showing inline

    Materialize CSS Showing errors on form fields

    How do I get rid of the last tr td bottom border using css?

    Does anybody know how I can adjust this CSS to achieve the desired hyperlink effect I'd like?

    How to make a white square around my form fields?

    Sencha Touch 2: How to handle custom css files while production build?

    How to? CSS “Position:Absolute” constant Margin-Top? Possible?

    How To Prevent Transition Animation To Run Page Load

    How to change the CSS of page dynamically based on value?

    How do I fill up the remainder of a div with another div?

    How to do Vertical+Horizontal centering in CSS