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

Question

I am using Bootstrap 4 and struggling to align Font Awesome icon horizontally and vertically. I want to use Bootstrap 4 built-in CSS only, no custom CSS.

I have managed to get it centred vertically using align-self-center however horizontally using justify-content-center doesn't seem to work, icon is still left aligned.

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

Answer 1

try to add text-center instead of justify-content-center

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" > <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <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 text-center"> <i class="far fa-thumbs-up fa-10x"></i> </div> </div>