Bootstrap 4水平和垂直对齐Font Awesome图标

时间:2018-09-13 10:14:10

标签: html css twitter-bootstrap bootstrap-4

我正在使用Bootstrap 4并努力将Font Awesome图标水平和垂直对齐。我只想使用Bootstrap 4内置CSS,没有自定义CSS。

我已经设法使用align-self-center使其垂直居中,但是似乎无法使用justify-content-center使其水平居中,图标仍然保持对齐状态。

  <div class="row">
    <div class="col-6">
      <h2 class="text-left">Heading 2</h2>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
    </div>

    <div class="col-6 align-self-center justify-content-center">
      <i class="far fa-thumbs-up fa-10x"></i>
    </div>
  </div>

0 个答案:

没有答案