Positionierung Font Awesome Symbol und ein Absatz

Question

Ich möchte das Symbol auf den Satz oben und beide in der Bootstrap-Spalte zentriert positionieren. Ich habe versucht, die Position und Anzeige in CSS für den Absatz und das Symbol zu ändern, aber es funktioniert nicht. Im Moment sieht es so aus dieser

ich es wie dieses

Hier ist der Code

#home-info { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: rgba(0,0,0,0.7); 
 
    top: 550px; 
 
    z-index: 1; 
 
    position: absolute; 
 
    
 
} 
 

 
.col-md-3 { 
 
    height: 100px; 
 
    background-color: #1e2c38; 
 
    text-align: center; 
 
    color: white; 
 
    border-bottom: 1px solid white; 
 
    border-top: 1px solid white; 
 
} 
 

 
.col-md-4 { 
 
    height: 300px; 
 
    text-align: center; 
 
    background-color: #1b2328; 
 
} 
 

 
.col-md-3 p { 
 
    position: relative; 
 
    width: 300px; 
 
    text-align: center; 
 
}

<div class="container-fluid"> <!-- HOME INFO --> 
 
       
 
       <div class="row"> 
 
        <div class="col-md-3" id="navy2"> 
 
         <div class="content-container"> 
 
          <i class="fa fa-newspaper-o fa-3x" aria-hidden="true"></i> 
 
          <p>Learn more about our recent events and news!</p> 
 
         </div> 
 
        </div> 
 
        <div class="col-md-3" id="navy3"> 
 
         <div class="content-container"> 
 
          <i class="fa fa-calendar fa-3x" aria-hidden="true"></i> 
 
          <p>Stay up to date! Get the school's calendar here!</p> 
 
         </div> 
 
        </div> 
 
        <div class="col-md-3" id="navy2"> 
 
         <div class="content-container"> 
 
          <i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i> 
 
          <p>Like and connect with us via Facebook!</p> 
 
         </div> 
 
        </div> 
 
        <div class="col-md-3" id="navy3"> 
 
         <div class="content-container"> 
 
          <i class="fa fa-youtube fa-3x" aria-hidden="true"></i> 
 
          <p>Learn more about us through our videos!</p> 
 
         </div> 
 
        </div> 
 
       </div> <!-- ROW -->

Dank sein wollen!

Answer 1

Sie können es Mitte durch die innere p ein display:block Element zu machen und verwenden margin: 0 auto es zum Zentrum ...

.col-md-3 p { 
    position: relative; 
    width: 300px; 
    display: block; 
    margin: 0 auto; 
} 

http://www.codeply.com/go/kFJwok7k0T

Da jedoch haben Sie die 300px-Set auf dem .col-md-3 p, die Text wird bei kleineren Breiten abgeschnitten. Es wäre besser, keine spezifische Breite auf dem .col-md-3 p zu setzen, damit es reaktionsfähig ist.

Answer 2

Sie können <br> Tag verwenden, um das Symbol und den Text zu trennen. Und da Sie font-awesome Symbole verwenden, verwenden Sie text-align: center, um sowohl das Symbol als auch den Text zu zentrieren.