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

问题描述

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

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;
}

解决方法

尝试使用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屏幕截图。

,

尝试以下修改

<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 ml-0">
            <div class="countdown text-left">
              <ul class="pl-0">
                <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>

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

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

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

Codepen