如何将js时钟与页面中心对齐？

Question

如何将javascript倒计时框与页面中心对齐？网址是js所在的网址是http://www.freelanceseohelp.com/offer/mobile/index.html

我尝试调整以下内容，但我遇到了问题：

.flip-clock-wrapper {

我尝试将上述内容添加到

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

任何帮助解决此问题将不胜感激。感谢。

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添加到其容器中来居中。

Answer 2

通过测试，我在考虑保证金时确定小部件的宽度为460px。这是实现它的css。

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

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

Answer 3

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

  

删除上面CSS类中的Commented CSS，并在CSS类中添加其余3行以获取您的页面，如下面

Answer 4

添加指定display: inline-block;的新div元素以对其进行归档。

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

截图

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
}

Answer 6

添加这是你的css-

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

我希望我能帮助你。

Answer 7

只需减小时钟包装的宽度即可。设定保证金价值。

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

Answer 8

试试这个

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

Answer 9

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

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

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

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

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>

Answer 11

让.flip-clock-wrapper包含width:auto和display:inline-block。那就是：

.flip-clock-wrapper {
    text-align: center !important;
    position: relative;
    width: auto;
    margin: 1em;
    display: inline-block;
}