css 如何使用Twitter Bootstrap将Glyphicon水平居中

wbgh16ku  于 2023-05-02  发布在  Bootstrap
关注(0)|答案(2)|浏览(158)

我正试图在我的Twitter Bootstrap 代码中集中我的FontAwesome图标。
这是我的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一个静态宽度,然后用。..

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

...但我不想给予周围的div一个静态宽度。
那么,我如何解决这个问题,而不应用静态宽度?

**编辑:**我也知道center HTML元素,但这不是CSS,因此不是很方便。

kq0g1dla

kq0g1dla1#

你只需要在容器div中的i中定义display:blocktext-align:center,你就可以得到它:

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

Here is a demo
**编辑#1:**由于这个答案似乎得到了一些牵引力,值得注意的是,更“twitter-bootstrapy”的方式是@SimoneMelloni在回答这个问题时建议的,即。使用text-center类。

请注意,这基本上与我的解决方案相同,考虑到text-center所做的一切都是设置text-align:center,它只是利用了twitter的引导功能。
还要注意,text-align:center只适用于block-level elements或显式设置display:block的情况,就像我上面的原始答案一样。在这里我需要指定它,因为我在i标记上使用了它,它是一个inline element

**EDIT #2:**我刚刚看到你在center元素上的[OP]编辑:虽然它确实不是CSS而是HTML,但这不是问题,更大的问题是它已经过时了。查看更多关于MDN's doc on the <center> element的信息

8xiog9wr

8xiog9wr2#

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

在没有打开css文件的情况下完成了这个技巧

相关问题