1

我正在尝试找到一种方法，无论屏幕大小如何，都可以将我的 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>

任何和所有的帮助将不胜感激。我还想在此计时器上方和下方居中放置大文本，因此如果有人可以提供帮助，我将永远感激不尽！

4

1 回答 1

4

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

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

更新

我注意到margin:-4em;on#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>
于 2015-05-07T03:04:46.350 回答