无法将div的动态内容与中心对齐

Question

我正在使用flipclock.js

的小型计数器

我每两秒检查一次唯一身份访问者的数量，如果数量增加，计数器会增加并翻转。之前我使用的是在页面加载时从数据库中获取的单个值。我正在使用中心标签中包含的div，如

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

价值恰好位于div的中心。但是现在我每2秒钟后获得更新的用户数并使用flipclock，这个数字并没有在中心对齐。我可以通过使用css修改边距来在中心对齐静态数字但是当数字达到像10000000这样的大值时它看起来不会很好。现在使用flipclock后，代码是

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

这看起来像

无论数字有多大或多小，我都希望它在中心位置。数字是动态的，随时间变化。

谢谢！

Answer 1

您可以使用transform技巧水平居中动态内容。 （还有其他方法可以做到这一点，但我认为这是最简单的 - 特别是在使用你不熟悉的库时 - 就CSS而言）

如果将计数器div包装在容器div中，则可以应用以下CSS：

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

但是，由于它位于绝对位置，因此会将元素从文档流中取出 如您所见，下面的示例实现了相同的效果，而不会将元素从文档流中取出，但稍微复杂一些。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：CSS-Tricks在集中方面做了很棒的指导，你可以参考：
https://css-tricks.com/centering-css-complete-guide/