Question

由于某种原因，我的种族倒数计时器输出的文本只是居中对齐到文本的左侧。尽管将CSS设置为文本中心，但我无法弄清楚为什么会这样做。

编辑：我相信我已经把它缩小到了字体渲染问题，如果我关闭特许经营权它会很好地中心但是Franchise对它的所有奇怪对齐（似乎是由于字体占用的“空间”）身体非常小但视觉上却不一样）。如果有人对如何解决这个问题有任何想法，那就太棒了。

注意：这只发生在Chrome和Safari中。它在Firefox中很好用。

enter image description here

HTML

<div class="card card-race">
 <div class="h">
 <h5 class="subheading letter-space">NEXT RACE IN...</h5>
 </div>
 <div class="bd">
 <span id="countdown"></span>
 </div>
 <div class="cta cta-2">
  <a href="#watch" class="btn btn-blue boxer"><i class="icon-play"></i>Watch</a>
  <a href="" class="btn btn-blue"><i class="icon-flag"></i>Recap</a>
  </div>
 </div>

CSS（SCSS）：

.card.card-race {
        background:darken($blue,30%);
        .bd {
            border: none;
            text-align: center;
        }
        .h {
            border:none;
            background:$blue;
        }
    }
    #countdown {
        font-family:'franchise';
        font-size: 3.8em;
        line-height: 1em;
        display:block;
        padding:18px 0;
        @include media(tablet) {
            padding-top:5px;
            font-size: 2.7em;
        }
    }

使用Javascript：

// Race Dates
        var raceDates = ["May 18, 2014", "June 7, 2014", "June 22, 2014"];
        var start = "May 18, 2014";
        // set the date we're counting down to
        var target_date = new Date(raceDates[0]).getTime();

        // variables for time units
        var days, hours, minutes, seconds;

        // get tag element
        var countdown = document.getElementById("countdown");

        // update the tag with id "countdown" every 1 second
        setInterval(function () {

        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        // do some time calculations
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        // format countdown string + set tag value
        countdown.innerHTML = days + "d " + hours + "h"
        ;


      }, 1000);

Answer 1

尝试制作你的bd div width =＆＃34; 100％＆＃34;

为什么我的javascript创建文本不居中？

1 个答案: