如何将JS时钟对齐到页面中心？

Question

我该如何将 JavaScript 倒计时框居中对齐到页面中央？JS 文件位于此 URL：http://www.freelanceseohelp.com/offer/mobile/index.html 我尝试了下面的对齐方式，但出现了问题：

.flip-clock-wrapper {

我尝试将上述内容添加到

中。

<div class="clock"></div> 

希望能得到任何修复这个问题的帮助。谢谢。

- Lee

---

您的帖子不完整，请更新。 - r3wt

Answer 1

虽然比较晚，但是以下方法适用于我编写时的版本（版本：0.7.4 Beta）。想法是将其包装在容器中并覆盖一些CSS。

HTML

<div class="container">
    <div class="flip-clock"></div>
    <!-- Flip clock is attached the this element, not .container -->
</div>

CSS

：层叠样式表。

.container {
    text-align: center;
}

.flip-clock {
    display: inline-block;
    width: auto;
}

默认情况下，.flip-clock 具有 width: 100% 和 display: block。通过设置 width: auto 和 display: inline-block，该项不再跨越其父级的宽度，并且可以通过将 text-align: center 添加到其容器来居中。

- Jonathon

---

去谷歌搜索同样的问题，你的容器div帮助我解决了相同的问题。点赞！ - DevOpsSauce

正是我所需要的。 - FosAvance

你救了我大忙，非常感谢。 - AraByte

Answer 2

通过测试，我确定了小部件的宽度在考虑边距时为460px。以下是使其实现的CSS。

.flip-clock-wrapper{
  max-width: 460px;
  margin: 3em auto 2em;
}

我还添加了3em的顶部边距和2em的底部边距以正确对齐它。那个页面的CSS有很多问题。

- r3wt

Answer 3

.flip-clock-wrapper {
  /* text-align: center; */
  /* position: relative; */
  /* width: 100%; */
  margin: 0 auto;
  max-width: 460px;
  margin-top: 2em;
}

在上述CSS类中删除已注释的CSS，并将剩下的3行添加到您的CSS类中，以使您的页面如下所示。

- Kawinesh S K

Answer 4

添加新的

元素，并指定display: inline-block;以实现此目的。

<div class="clock flip-clock-wrapper">
     <div class="middle">            // Add div element (opening)
         ....
         ....
         ....
     </div>                          // Add div element (closing) 
</div>

CSS

.middle{
    display:inline-block;
    *display:inline;/* IE*/
    *zoom:1;/* IE*/
}

截图

- Jaykumar Patel

Answer 5

另一种方式：

.flip-clock-wrapper {
   display: table;     //added
}

.flip-clock-divider {
   float: left; // remove
}

.flip-clock-wrapper ul {
   float: left;           // remove
   display: inline-block; // added
}

- Samir Das

Answer 6

将此添加到您的CSS中-

.flip-clock-wrapper{
   width:460px;
   margin:1em auto;
}

我希望我能帮到你。

- Mukul Kant

Answer 7

只需减小时钟包装器的宽度并设置边距值。

.flip-clock-wrapper{
    width: 480px;
    margin: 30px auto;
}

- stanze

Answer 8

试试这样

.flip-clock-wrapper{
  max-width:480px;
  margin:3em auto;
}

- G.L.P

---

答案不正确。元素的最大宽度为460px，而不是480px。你也只是在模仿其他答案，这使得你的回答所获得的赞数看起来非常可疑。 - r3wt

Answer 9

我使用CDN中的.js文件，不想编辑它。

我将这些行应用于我的网站主CSS：

.flip-clock-wrapper {
    width: inherit !important;
}

.flip-clock {
    display: inline-block;
    width: auto;
}

- Olivier.Roger

Answer 10

<table align="center">
  <tr>
    <td></td>
    <td>
      <div class="clock" style="margin:Inherited;"></div>
      <div class="message"></div>   
      <script type="text/javascript">
        code!!!
      </script>
    </td>
    <td></td>
  </tr>
</table>

- Ch Ch

---

如果您解决了问题，解释一下您使用的方法或技术会对提问者有所帮助。 - metasim