センターのアイコン

Question

マイアイコン左に続ける：

<section class="section-what-i-do"> 
    <div class="container"> 
     <h2>What I do</h2> 
     <p class="sub-header" id="learn-more-section">Studying, creating, learning</p> 
     <div class="row"> 
     <div class="col-md-4"> 
      <i class="ion-ios-monitor-outline icon-large"></i> 
      <h3>Computer Science</h3> 
     </div> 


     <div class="col-md-4"> 
      <i class="ion-ios-cloudy-outline icon-large"></i> 
      <h3>Web development</h3> 
     </div> 


     <div class="col-md-4"> 
      <i class="ion-ios-bolt-outline icon-large"></i> 
      <h3>Learning new tech</h3> 
     </div> 

     </div> 
    </div> 
    </section> 

のCss：私はブートストラップglyphiconsを使用したくない

.icon-large{ 
    font-size: 350%; 
    text-align: center; 
    margin: 0 auto 10px auto; 
    color: #e74c3c; 
} 

、ioniconsフォントがずっとよく見えます私に。
アイコンは、コードがfloat: leftに設定されているかのように、左端に表示されます。

Answer 1

あなたのアイコンは、デフォルトではdisplay:inlineはそうmarginに影響されませんされている... 親のdivにtext-align:centerを入れてみてください。

.icon-large { 
 
    font-size: 350%; 
 
    color: #e74c3c; 
 
} 
 

 
.col-md-4 { 
 
    text-align: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 
<section class="section-what-i-do"> 
 
    <div class="container"> 
 
    <h2>What I do</h2> 
 
    <p class="sub-header" id="learn-more-section">Studying, creating, learning</p> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <i class="ion-ios-monitor-outline icon-large"></i> 
 
     <h3>Computer Science</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>