左对齐div,然后居中对齐底部文本

时间:2019-07-21 02:47:57

标签: html css

enter image description here

你好!所以我正在使用引导程序4。

我有2个列。

在左侧,我想将文本左对齐 Left aligned text,并在其下方居中放置Centered text

与右对齐文本相同。

如何获得左对齐和右对齐文本,并在其下居中对齐文本?

1 个答案:

答案 0 :(得分: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>

这应该是这样:

enter image description here

相关问题