javascript - CSS：左对齐块，但在 BS4 中居中

Question

我的网站上有一个倒数计时器，它要求它的文本内容集中对齐。但是，我想将倒数计时器放置在容器本身中，并将整个计时器对齐到容器的左侧。这是我当前的代码：

https://codepen.io/Darlton29/pen/OJNzXEB

我希望计时器本身与左侧对齐，但是无论我尝试什么，我似乎都无法让它工作，我尝试将它包装在另一个容器中，如下所示：

      <div class="container">
        <div class="countdown">
          <ul>
            <li><span id="days"></span>days</li>
            <li><span id="hours"></span>Hours</li>
            <li><span id="minutes"></span>Minutes</li>
            <li><span id="seconds"></span>Seconds</li>
          </ul>
        </div>
      </div>

但这没有用。

CSS：

li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 4.5rem;
}

.countdown {
  margin: 0 auto;
  padding: 0.5rem;
  text-align: center;
}

标签： javascripthtmlcsstwitter-bootstrap

Answer 1

尝试使用flex：

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('Sep 30, 2020 00:00:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;

    document.getElementById('days').innerText = Math.floor(distance / (day)),
      document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
      document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
      document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

    //do something later when date is reached
    //if (distance < 0) {
    //  clearInterval(x);
    //  'IT'S MY BIRTHDAY!;
    //}

  }, second)

.container {
  display: flex;
  text-align: left;
  border: 1px solid green;
}

li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  margin: 10px;
  text-transform: uppercase;
}

.countdown {
  padding: 0.5rem;
}

.countdown ul li span {
  border: 1px solid yellow;
  display: flex;
  justify-content: center;
  font-size: 4rem;
}

<section style="background-color: pink; color: white;">
  <div class="container-fluid mt-5">
    <div class="row">
      <div class="col">
        <h1>BIRTHDAY COUNTDOWN</h1>
        <h2>Countdown to my birthday:</h2>
        <div class="container">
          <div class="countdown">
            <ul>
              <li><span id="days"></span>days</li>
              <li><span id="hours"></span>Hours</li>
              <li><span id="minutes"></span>Minutes</li>
              <li><span id="seconds"></span>Seconds</li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>

Codepen 截图。