在所有屏幕尺寸上自动居中 Flipclock.js 对象

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>

更新

我注意到 #counter 元素上的 margin:-4em; 不是由插件生成的。要修复它，请更新 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 对象

Autocentering Flipclock.js object on all screen sizes

html

javascript

css

frontend

flipclock