如何使用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一个静态宽度.

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

编辑:我也知道centerHTML元素,但这不是CSS,因此不是很方便.

Answer 1

所有你需要的是定义display:block与text-align:center在i您的容器内div,你就会有它:

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

这是一个演示

编辑#1:由于这个答案似乎得到了一些牵引力,值得注意的是,更多的"推特 - 训练 " - 这样做将是@SimoneMelloni在回答这个问题时提出的建议,即.使用该text-center课程.

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

另请注意,text-align:center仅适用于块级元素或您明确设置的元素display:block,如上面的原始答案.在那里我需要指定,因为我使用它i,这是一个内联元素.

编辑#2:我刚看到你对center元素的编辑:虽然它确实不是CSS而是HTML,这不是一个问题,更大的问题是它被弃用了.在MDN的元素文档上查看有关它的更多信息<center>

Answer 2

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

没有打开css文件的诀窍