html - h3 Bootstrap(Ionicons)上方的中心图标

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:

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

我不想使用 Bootstrap glyphicons，ionicons 字体对我来说看起来好多了。
图标出现在最左边，就好像有设置为 float: left 的代码。

Answer 1

尝试将 text-align:center 放在 parent div 上...

默认情况下，您的图标是 display:inline，因此不受 margin 的影响。

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