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
}

<强> Here is a demo

编辑＃1：由于这个答案似乎有所吸引力，值得注意的是，更多＆＃34; twitter-bootstrapy＆＃34; -way这样做会是{ {3}}，即。使用text-center类。

请注意，这与我的解决方案基本相同，考虑到所有text-center确实设置了text-align:center，它只是使用了Twitter引导功能。

另请注意，text-align:center仅适用于@SimoneMelloni suggested in their answer to this question或您明确设置display:block的内容，如上面的原始答案所示。在那里，我需要指定，因为我在i上使用了它，这是一个block-level elements。

编辑＃2：我刚刚在center元素上看到了您的修改：虽然它确实不是CSS而是HTML，这不是一个问题，更大的问题它被弃用了。在inline element

上查看有关该信息的更多信息

Answer 2

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

没有打开css文件的诀窍

如何使用Twitter Bootstrap水平居中Glyphicons

2 个答案: