Center icons above h3 Bootstrap (Ionicons) - html

Question

My icons keep going to the left:
<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;
}
I do not want to use Bootstrap glyphicons, the ionicons fonts look much better to me.
The icons appear to the far left as if there is code that is set to float: left.

Answer 1

Try putting the text-align:center on the parent div...
You icons are display:inline by default so aren't affected by 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>