【问题标题】: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-clockwidth: 100%display: block。通过设置width: autodisplay: 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:autodisplay:inline-block。那就是:

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

                【讨论】:

                  猜你喜欢
                  • 2013-12-08
                  • 1970-01-01
                  • 1970-01-01
                  • 2020-10-29
                  • 1970-01-01
                  • 1970-01-01
                  • 2016-01-23
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多