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

【问题标题】：How to align js clock to center of page?如何将 js 时钟与页面中心对齐？
【发布时间】：2015-08-06 13:12:51
【问题描述】：

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

我尝试对齐以下内容，但遇到了问题：

.flip-clock-wrapper {

我尝试将以上内容添加到

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

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

【问题讨论】：

您的帖子不完整。请更新它

标签： css image center

【解决方案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 添加到其容器来居中。

【讨论】：

去谷歌找到同样的东西，你的容器 div 帮助我解决了同样的问题。点赞！
正是我需要的
你为我节省了很多时间，很多爱

【解决方案2】：

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

删除上面 CSS 类中的注释 CSS 并在您的 CSS 类中添加其余 3 行，以使您的页面如下所示

【讨论】：

【解决方案3】：

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

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

我还添加了 3em 的上边距和 2em 的下边距以正确对齐。该页面的 CSS 存在大量问题。

【讨论】：

【解决方案4】：

添加新的 div 元素并指定 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*/
}

截图

【讨论】：

【解决方案5】：

另一种方式：

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

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

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

【讨论】：

【解决方案6】：

添加这是你的 css-

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

希望对你有帮助。

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

这样试试

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

【讨论】：

答案不正确。元素的最大宽度是 460px，而不是 480px。您还只是在这里重复了其余的答案，这使得您收到的赞成票看起来完全可疑。

【解决方案9】：

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

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

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

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

【讨论】：

【解决方案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>

【讨论】：

如果您解释了您用来解决问题的方法或技术，将对提问者有所帮助。

【解决方案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;
}

【讨论】：