将标题与Javascript倒计时计时器中的每个数字对齐

如何在每一天、每小时、每分钟、每一秒对中每个跨度？目前只是在文本中添加填充，但它没有与相应的数字对齐。当任何数字列变为个位数时，它会移动数字

钢笔：

//设置我们倒计时的日期
var countDownDate=新日期（“2017年10月7日12:00:00”）.getTime（）；
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//使用id=“demo”在元素中显示结果
document.getElementById（“倒计时”）.innerHTML=days+“”+hours+“”+
分钟+“”+秒+“”；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
document.getElementById（“倒计时”）.innerHTML=“过期”；
}
}, 1000);
正文{
背景：url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
}
.倒计时包装{
位置：相对位置；
高度：400px；
}
#倒计时，
#倒计时文本{
字体系列：“Roboto”，无衬线；
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#倒计时{
字号：900；
字号：142px；
颜色：#fff；
不透明度：.7；
字母间距：-4px；
}
#倒计时文本{
字号：900；
字体大小：40px；
颜色：黑色；
不透明度：.8；
}
.计数器文本{
填充：20px；
}

天
小时
分钟
秒
与其将动态更新的倒计时数字放在一个div中，不如为天、小时、分钟和秒创建一个单独的div

<div class="countdown-wrapper">
    <div class="countdown-chunk">
        <div class="counter-value" id="daysValue"></div>
        <div class="counter-label">DAYS</div>
    </div>
    <div class="countdown-chunk">
        <div class="counter-value" id="hoursValue"></div>
        <div class="counter-label">HOURS</div>
    </div>
    <div class="countdown-chunk">
        <div class="counter-value" id="minutesValue"></div>
        <div class="counter-label">MINUTES</div>
    </div>
    <div class="countdown-chunk">
        <div class="counter-value" id="secondsValue"></div>
        <div class="counter-label">SECONDS</div>
    </div>
</div>

您还有4个元素要更新，而不是仅更新一个，但与尝试对齐不相连的元素相比，这很容易。
请尝试此操作

        .row {
           display: -webkit-flex;
           display: flex;
           -webkit-flex-direction: row;
           flex-direction: row;
        }

        .column {
           display: -webkit-flex;
           display: flex;
           -webkit-flex-direction: column;
           flex-direction: column;
        }


        <div class="row"> 
            <div class="column">
              <div class="counter-text" id="days"></div>
              <div class="counter-text" id="hours"></div>
              <div class="counter-text" id="minutes"></div>
              <div class="counter-text" id="secs"></div>
            </div>
            <div class="column">
              <div class="counter-text">DAYS</div>
              <div class="counter-text">HOURS</div>
              <div class="counter-text">MINUTES</div>
              <div class="counter-text">SECS</div>
            </div>
        </div>
        //javascript
         document.getElementById("days").innerHTML = days ;
         document.getElementById("hours").innerHTML = hours ;
         document.getElementById("minutes").innerHTML = minutes ;
         document.getElementById("secs").innerHTML = secs ;

.row{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
}
.栏目{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
}
天
小时
会议记录
秒
//javascript
document.getElementById（“天”）.innerHTML=天；
document.getElementById（“小时”）.innerHTML=hours；
document.getElementById（“分钟”）.innerHTML=minutes；
document.getElementById（“secs”）.innerHTML=secs；
您需要稍微重新构造HTML，使数字和标签位于同一个包含元素中。这可以让你在他们周围放一个“盒子”，这样他们就可以排成一行。有一种方法可以做到这一点：


//设置我们倒计时的日期
var countDownDate=新日期（“2017年10月7日12:00:00”）.getTime（）；
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//使用id=“demo”在元素中显示结果
document.getElementById（“计数器天数”）.innerHTML=days；
document.getElementById（“计数器小时”）.innerHTML=hours；
document.getElementById（“计数器分钟”）.innerHTML=minutes；
document.getElementById（“计数器秒”）.innerHTML=seconds；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
document.getElementById（“倒计时”）.innerHTML=“过期”；
}
}, 1000);
正文{
背景：url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
}
.倒计时包装{
位置：相对位置；
高度：400px；
}
#倒计时{
字体系列：“Roboto”，无衬线；
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#倒计时>div{
浮动：左；
填充：20px；
}
.计数器编号{
字号：900；
字号：142px；
颜色：#fff；
不透明度：.7；
字母间距：-4px；
}
.计数器文本{
显示：块；
明确：两者皆有；
字号：900；
字体大小：40px；
颜色：黑色；
不透明度：.8；
}

天
小时
分钟
秒
我做过类似的事情。我重组了您的html，对css进行了一些调整，并替换了您的javascript：

document.getElementById("countdown").innerHTML = days + " " + hours + " " +
minutes + " " + seconds + " ";

与：

将它们放置在新创建的div中

以下是。
您应该为每天、小时、分钟、秒使用单独的
div
元素。那会给你更多的控制权
document.getElementById("countdown").innerHTML = days + " " + hours + " " +
minutes + " " + seconds + " ";

document.getElementById("daysTicker").innerHTML = days;
document.getElementById("hoursTicker").innerHTML = hours;
document.getElementById("minsTicker").innerHTML = minutes;
document.getElementById("secsTicker").innerHTML = seconds;