ポジショニングフォント驚くばかりのアイコンと段落

Question

私はアイコンを文の上に置いて、どちらもブートストラップカラムの中央に置いてください。段落とアイコンの両方の位置を変更してCSSで表示しようとしましたが、うまくいきませんでした。 は、今のところは、私はそれがこの

のようになりたい、この

のように見えるここでコード

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

感謝です！

Answer 1

あなたは、内側pdisplay:block要素を作ることによって、それを中央にして、それを中央にmargin: 0 autoを使用することができます...しかし

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

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

、あなたは.col-md-3 pに300ピクセルのセットを持っているので、テキストは、より小さな幅でカットオフされます。応答性があるように、.col-md-3 pに特定の幅を設定しない方が良いでしょう。

Answer 2

<br>タグを使用すると、アイコンとテキストを区切ることができます。また、フォントがすばらしいアイコンを使用しているので、text-align: centerを使用して、アイコンとテキストの両方を中央に配置します。