Question

我正试图找到一种方法来动态地将我的flipclock.js放在页面上，无论屏幕大小如何。到目前为止我找到的每个解决方案似乎都不起作用（由于我认为flipclock.js代码中有一些内部规范）。我在这里使用github页面来托管这个时钟：http://spriggs857.github.io/misc/这里是我的代码：

<style type="text/css"> 
    #counter {
        position:fixed;
        top: 50%;
        left: 30%;
        width:70em;
        height:50em;
    }
</style>

<body>
  <div id="counter" class="clock" style="margin:-4em;"></div>

    <script type="text/javascript">
        var clock;
        $(document).ready(function() {
            // Grab the current date
            var currentDate = new Date();
            var pastDate  = new Date('April 19, 2015 23:17:00');
            // Calculate the difference in seconds between the future and     current date
            var diff = currentDate.getTime() / 1000 - pastDate.getTime() /         1000;
            // Instantiate a countdown FlipClock
            clock = $('.clock').FlipClock(diff, {
                clockFace: 'DailyCounter'
            });
        });
    </script>
</body>

非常感谢任何和所有帮助。我还想把这个计时器上方和下方的大文本居中，所以如果有人可以提供帮助，我将永远感激不尽！

Answer 1

它居中，只是你的宽度不对。将计数器width改为auto。

<style type="text/css"> 
    #counter {
        position:fixed;
        top: 50%;
        left: 50%;
        width:auto;
        height:50em;
    }
</style>

<强>更新

我注意到margin:-4em;元素上的#counter不是由插件生成的。要修复它，请更新margin以使其完全居中。

  <style type="text/css"> 
        #counter {
            position:fixed;
            top: 50%;
            left: 50%; // make it 50% for all sizes
            width:auto;
            height:50em;
            margin-left: -310px; // #counter width divided by two
        }
    </style>

在所有屏幕尺寸上自动输入Flipclock.js对象

1 个答案: