带文本的居中图标

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

但是它没有完全居中在中间，我在调整浏览器大小时也遇到问题 window。

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

没有任何样式是怎样的。

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

带文本的居中图标

Centering icon with text

html

css

alignment

centering