如何使用 Twitter Bootstrap 将 Glyphicons 水平居中

Question

我正在尝试将我的 FontAwesome 图标置于我的 Twitter Bootstrap 代码中。

这是我的 HTML：

<div id="frontpage-content" class="content">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <span>
                    <i class="fa fa-camera-retro fa-5x"></i>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore, ipsa dolorum laborum sit alias iusto nam quibusdam ad distinctio rerum expedita autem itaque delectus iste mollitia perferendis sint libero accusamus
                        in. Enim, natus necessitatibus pariatur optio explicabo consequuntur quod!</p>
            </div>
            <div class="col-lg-4">
                <i class="fa fa-camera-retro fa-5x"></i>
                <p>Ut, aliquid, aperiam, veniam modi voluptates maiores nesciunt libero fugiat illum recusandae cum similique et alias possimus error ex tenetur quasi sint eius dicta officia earum eveniet suscipit corporis autem deleniti nihil sed!
                        Earum blanditiis vel similique nisi fugit reprehenderit?</p>
            </div>
            <div class="col-lg-4">
                <i class="fa fa-camera-retro fa-5x"></i>
                <p>Quisquam eos aperiam autem atque minus modi similique earum! Ab, laboriosam odit non quo officiis asperiores atque dolorum omnis vitae in qui officia sequi molestias quisquam velit exercitationem aperiam. Voluptatum, unde, nesciunt
                        temporibus voluptates sint ab architecto at quod dolore.</p>
            </div>
        </div>
    </div>

这是我已经尝试过的：

#frontpage-content {
    background-color: $bgDefault;
    i {
        text-align:center;
    }
    span {
        text-align:center;
    }
}

完美适用于文本，但不适用于

i

元素。

我知道我可以将它居中，如果我给周围的 div 一个静态宽度，然后将

i

元素定位为...

 margin-right: auto;
 margin-left: auto;
 display: block;

...但我不想给周围的 div 一个静态宽度。

那么，如何在不应用静态宽度的情况下解决这个问题？

编辑：我也知道

center

HTML元素，但这不是CSS，因此不是很方便。

Answer 1

所有你需要的是在你的容器

display:block

中用

text-align:center

定义

i

div

你就会拥有它：

.col-lg-4 i {
    display:block;
    text-align:center
}

这里有演示

编辑 #1： 由于这个答案似乎得到了一些关注，因此值得注意的是，更多的“twitter-bootstrapy”方法是 @SimoneMelloni 在他们对这个问题的回答中所建议的，即。

text-center

类的使用。

请注意，这与我的解决方案基本相同，考虑到所有

text-center

所做的设置

text-align:center

，它只是利用了推特引导功能。

另请注意，

text-align:center

仅适用于块级元素或您明确设置

display:block

的元素，如我上面的原始答案。在那里我需要指定它，因为我在

i

标签上使用它，这是一个 内联元素.

编辑 #2： 我刚刚在

center

元素上看到您的 [OP] 编辑：虽然它确实不是 CSS 而是 HTML，但这不是什么大问题，但更大的问题是它已经过时了。在 MDN 的

<center>

元素

文档中查看更多信息

Answer 2

<div class="text-center">
    <i class="fa fa-camera-retro fa-5x"></i>
</div>

没有打开 css 文件就成功了