I've been working on a small counter utilizing flipclock.js to track the number of unique visitors. Every two seconds, the counter updates to reflect the increase in visitors by flipping. Previously, I displayed a static value fetched from the database upon page load enclosed in a div centered using the center tag:
<center>
<div id= "counter"> <?php echo $count;?</div>
</center>
However, with the dynamic updates provided by flipclock, the number no longer aligns in the center as before. While I can manually adjust the margins through CSS to center a static number, it won't look good once the number reaches a larger value like 10,000,000. The current code structure when using flipclock 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>
The current appearance can be seen here.
I aim to have the counter number centrally aligned regardless of its size, given that the number updates dynamically with time.
Thank you!