Question

我已经在这里阅读了很多选项来实现这一目标，但出于某种原因，我无法按照我想要的方式工作。

我试图让倒数计时器始终保持水平居中。问题是，因为每次倒计时它都会稍微改变，我需要它固定一个位置，否则起始数字会左右跳跃一点点，因为最后一个数字在不同数字之间的大小变化很小..有意义吗？

因此，给它一个固定的位置可以使数字平滑变化，但是它很难完美地居中，因为宽度会根据计数器的设置位置而变化。

如果有人愿意看一下，我已经设置了一个小小的JSFiddle。

非常感谢。

<body>
    <nav class="navbar navbar-default" role="navigation">
        <a class="navbar-brand" href="#"><h1>MATRIX</h1></a>
    </nav>


    <div class="container">
        <div class="col-md-12">
            <div id="countdown"></div>
        </div>
    </div>

    </body>

JSFiddle

Answer 1

将以下内容添加到CSS中：

div#countdown {
    left: 50%; /* move #countdown's left edge to center */
    transform: translateX(-50%); /* shift #countdown to the left by half of it's width */
    white-space: nowrap; /* keep #countdown from word-breaking */
}

＆＃13;

// set the date we're counting down to
            var target_date = new Date('Dec, 25, 2016').getTime();

            // variables for time units
            var days, hours, minutes, seconds, ms_step = 10;

            // get tag element
            var countdown = document.getElementById('countdown');

            setInterval(function () {
                var current_date = new Date().getTime();
                var seconds_left = (target_date - current_date) / 1000;
                days = parseInt(seconds_left / 86400);
                seconds_left = seconds_left % 86400;
                hours = parseInt(seconds_left / 3600);
                hours = hours < 10 ? '0' + hours : hours;
                seconds_left = seconds_left % 3600;
                min = parseInt(seconds_left / 60);
                min = min < 10 ? '0' + min : min;
                sec = parseInt(seconds_left % 60);
                sec = sec < 10 ? '0' + sec : sec;
                ms = parseInt(target_date - current_date);

                // format countdown string + set tag value
                countdown.innerHTML = '' +
                        '<span class="days">' + days + ': </span>' +
                        '<span class="hours">' + hours + ': </span>' +
                        '<span class="minutes">' + min + ': </span>' +
                        '<span class="seconds">' + sec + '</span>';
                // this is just for milliseconds only
                /* countdown.innerHTML = 
                 '<span class="ms">'+ms+' ms</span>'; */
            }, ms_step);

＆＃13;

html {
    background: url(../images/main_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/main_bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/main_bg.jpg', sizingMethod='scale')";
  background-color: lightgray;
}

html:after {
    content: "";
    background: url(../images/overlay.png) repeat;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
}

body{
    background-color : transparent;
    height:100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.navbar {
    min-height : 90px;
}

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 10px;
    text-align: center;
    margin: auto;
}

.navbar-brand h1 {
    font-size : 36px;
    font-weight : 200;
    margin: 0px;
    color : #000;
}

.navbar-toggle {
    z-index:3;
}

.container {
    height:100%;
}
div#countdown {
    position: fixed;
    top: 230px;
    left: 50%; /* move element's left edge to center */
    transform: translateX(-50%); /* shift element to the left by half of it's width */
    white-space: nowrap; /* keep countdown from word-breaking */
}
#countdown span {
  font-family: 'Oswald', sans-serif;
  color: #fff;
  font-weight: 100;
}

#countdown span {
    display: inline-block;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 0.13em;
}

＆＃13;

<nav class="navbar navbar-default" role="navigation">
  <a class="navbar-brand" href="#"><h1>MATRIX</h1></a>
</nav>


<div class="container">
  <div class="col-md-12">
    <div id="countdown"></div>
  </div>
</div>

＆＃13;

水平对齐固定分区

1 个答案: