左對齊div，然后居中對齊底部文本

Question

你好！ 所以我正在使用引導程序4。

我有2列。

在左側，我想使文本左對齊 Left aligned text ，並在其下居中Centered text

與正確的對齊文本相同。

如何獲得左對齊和右對齊文本，並在其下居中對齊文本？

Answer 1

自從您提到Bootstrap 4以來，它的工作原理是：

<div class="row">
  <div class="col">
    <div class="d-inline-block float-left">
      <div class="text-left">
        <h4>Left Aligned Text</h4>
        <span class="d-block text-center">center aligned text</span>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="d-inline-block float-right">
      <div class="text-right">
        <h4>Right Aligned Text</h4>
        <span class="d-block text-center">center aligned text</span>
      </div>
    </div>
  </div>
</div>

外觀如下：