Search code examples
jqueryhtmlcssalignmentflipclock

Unable to align the dynamic content of a div in center

I am working on a small counter which is using the flipclock.js

I am checking the number of unique visitors after every two seconds and if the number increases the counter gets incremented and flips. Earlier I was using a single value that was fetched from database when the page gets loaded. I was using a div enclosed in center tag like

<center> 
      <div id= "counter"> <?php echo $count;?</div>
</center>

The value was right in the center of div. But now as I am getting the updated number of users after every 2 seconds and using flipclock as well, the number doesn't align in center. I can align a static number in center by modifying the margins using css but it will not look good when number reaches to a large value like 10000000. Right now after using flipclock, the code is

<div id="counter"  class="flip-clock-wrapper">
    <ul class="flip  play">
        <li class="flip-clock-before">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">1</div></div><div class="down"><div class="shadow"></div><div class="inn">1</div></div></a>
        </li>
            <li class="flip-clock-active">
                <a href="#"><div class="up"><div class="shadow"></div><div class="inn">1</div></div><div class="down"><div class="shadow"></div><div class="inn">1</div></div></a>
            </li>
    </ul>

    <ul class="flip  play">
        <li class="flip-clock-before">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">9</div></div><div class="down"><div class="shadow"></div><div class="inn">9</div></div></a>
        </li>

        <li class="flip-clock-active">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">0</div></div><div class="down"><div class="shadow"></div><div class="inn">0</div></div></a>
        </li>
    </ul>
</div>

This looks like enter image description here

I want it to be in center regardless of how big or small the number is. Number is dynamic and keep changes with time.

Thanks!

Solution

  • You can use the transform trick to center the dynamic content horizontally. (There are other ways to do this, but I think this is the easiest - especially when working with libraries you're unfamiliar with - in terms of the CSS)

    If you wrap your counter div in a container div, you can then apply the following CSS:

    position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

    However, as this is positioned absolute, it will take the element out of the document flow.
    This example below achieves the same effect without taking the element out of the document flow, as you can see, but is slightly more complex.

    /*
  This becomes the same height as .container but spans the entire document
  so the content is pushed below the .container element.
*/
.container-outer {
  display: block;
  overflow: hidden;
}

/*
  This forcibly aligns its contents to the center of itself.
*/
.container {
  position: relative;
  float: left;
  
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* SAMPLE CONTENT - IGNORE */
.sample {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
}
    <div class="container-outer">
  <div class="container">
    <div class="sample"></div>
  </div>
</div>

<!-- As you can see, this sample outside of the container is pushed below the centered element. -->
<div class="sample"></div>

    EDIT: CSS-Tricks has done a fantastic guide on centering that you can refer to:
    https://css-tricks.com/centering-css-complete-guide/