Zentrieren von Icons in Bootstrap 4

Question

Ich habe eine App, die ich mit Bootstrap 4 erstellen. Ich muss einige Symbole unter einem Bild zentrieren. Ich habe ein Bootply here. Mein Code sieht wie folgt aus:

<div class="container"> 
    <br> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <div class="row"> 
     <div class="col-md-3"> 
      <img alt="Picture" src="http://cdn.bgr.com/2015/11/bill-gates.jpg" class="img-circle center-block" style="max-height:6.0rem;"> 
      <br> 
      <ul class="list-inline"> 
      <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-twitter"></i></a></li> 
      <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-google-plus"></i></a></li> 
      <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-linkedin"></i></a></li> 
      </ul> 
     </div> 

     <div class="col-md-9"> 
      <div><strong>Bill Gates</strong></div> 
      <p> 
      Here is some information about Bill Gates. 
      </p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Meine Frage ist, wie kann horizontal ich Zentrieren Sie die drei Symbole unter meinem Bild so, dass es wie eine zentrierte Symbolleiste aussieht?

Answer 1

Entfernen Sie auf Ihrem UL-Tag die inline-list-Klasse, um einen Float zu erzwingen.