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，离子的字体对我来说看起来好多了图标显示在最左侧，好像有代码设置为float: left。

Answer 1

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

上

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

＆＃13;

.icon-large {
  font-size: 350%;
  color: #e74c3c;
}

.col-md-4 {
  text-align: center;
}

＆＃13;

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

＆＃13;

h3 Bootstrap（Ionicons）上方的中心图标

1 个答案: