我正试图在我的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,因此不是很方便。
2条答案
按热度按时间kq0g1dla1#
你只需要在容器
div
中的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的信息8xiog9wr2#
在没有打开css文件的情况下完成了这个技巧