html - 带文本的居中图标

Question

我试图将一个图标和一些文本居中，但似乎我无法做到正确。我知道这可能看起来很容易，但我才刚刚开始，我想不出办法来做到这一点。这是代码:

<div class="row">
    <div class="col-sm-4">
        <div class="features-icon">
            <div class="outter-circle">
                <div class="inner-circle">
                    <i class="fa fa-rocket"></i>
                </div>
            </div>
        </div>
        <div class="features-text">
            <span id="features-title"><h3>High Quality Services</h3></span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris dui, laoreet vitae elementum a, feugiat nec tortor. Sed quam neque, ultricies nec est id, accumsan porttitor tellus.</p>
            <hr>
        </div>
    </div>
</div>

我试过:

.features-text {
    width: 100%;
}
.features-icon {
    width: 50%;
    margin: 0 auto;
}

但它并没有完全居中在中间，而且在调整浏览器窗口大小时我也遇到了问题。

可能是我不清楚，所以我上传了一些图片。

没有任何样式是怎样的。

http://tinypic.com/r/k99awh/8

第二张图片采用了我应用的样式。

http://tinypic.com/r/2607jac/8

如您所见，它没有完全居中...请帮忙？ :)

Answer 1

使用text-align: center;

.row {
  text-align: center;
}

<div class="row">
  <div class="features-icon">
    <i class="fa fa-rocket">YOUR ICON</i>
  </div>
  <div class="features-text">
    <span id="features-title"><h3>High Quality Services</h3></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris
       dui, laoreet vitae elementum a, feugiat nec tortor. Sed quam neque,
       ultricies nec est id, accumsan porttitor tellus.
    </p>
  </div>
</div>

jsfiddle