左对齐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>

这应该是这样：