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

中心图标，带文本

1 个答案: