Html 如何使用 Twitter Bootstrap 将 Glyphicons 水平居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23229249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I center Glyphicons horizontally using Twitter Bootstrap
提问by LoveAndHappiness
I am trying to center my FontAwesome icons inside my Twitter Bootstrap code.
我试图将我的 FontAwesome 图标放在我的 Twitter Bootstrap 代码中。
This is my HTML:
这是我的 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>
And here is what I have already tried:
这是我已经尝试过的：
#frontpage-content {
background-color: $bgDefault;
i {
text-align:center;
}
span {
text-align:center;
}
}
Works perfectly for the text, but doesn't work for the ielements.
适用于文本，但不适用于i元素。
I know I can center it, if I give to the surrounding div a static width and then position the ielement with...
我知道我可以将它居中，如果我给周围的 div 一个静态宽度，然后i用......
margin-right: auto;
margin-left: auto;
display: block;
...but I don't want to give the surrounding div a static width.
...但我不想给周围的 div 一个静态宽度。
So, how do I solve this problem, without applying static width?
那么，如何在不应用静态宽度的情况下解决这个问题？
Edit:Also I know of the centerHTML element, but this wouldn't be CSS, and therefore not very handy.
编辑：我也知道centerHTML 元素，但这不是 CSS，因此不是很方便。
回答by webeno
All you need is to define display:blockwith text-align:centerin the iinside your container divand you'll have it:
您所需要的只是在容器内部定义display:blockwith ，您将拥有它：text-align:centeridiv
.col-lg-4 i {
display:block;
text-align:center
}
EDIT #1:As this answer seems to get some traction, it is worth to note that the more "twitter-bootstrapy" way of doing this would be what @SimoneMelloni suggested in their answer to this question, ie. the use of the text-centerclass.
编辑#1：由于这个答案似乎引起了一些关注，因此值得注意的是，@SimoneMelloni 在他们对这个问题的回答中建议的更多“twitter-bootstrapy”方式是什么，即。text-center类的使用。
Note that this is basically the same as my solution, considering all text-centerdoes is set text-align:center, it is just making use of a twitter bootstrap feature.
请注意，这与我的解决方案基本相同，考虑到 all text-centerdo is set text-align:center，它只是利用了 twitter bootstrap 功能。
Also note that text-align:centeronly works on block-level elementsor ones where you explicitly set display:block, as in my original answer above. There I needed to specify that because I used it on the itag, which is an inline element.
另请注意，text-align:center仅适用于块级元素或您明确设置的元素display:block，如我上面的原始答案。我需要在那里指定，因为我在i标签上使用了它，这是一个内联元素。
EDIT #2:I just saw your [OP] edit on the centerelement: while it is indeed not CSS but HTML, that's less of an issue, the bigger issue with it is that it's obsolete. See more info on it on MDN's doc on the <center>element
编辑 #2：我刚刚看到您对center元素的[OP] 编辑：虽然它确实不是 CSS 而是 HTML，但这不是问题，更大的问题是它已经过时了。在元素的MDN 文档上查看更多信息<center>
回答by Simone Melloni
<div class="text-center">
<i class="fa fa-camera-retro fa-5x></i>
</div>
Did the trick without opening the css file
在不打开 css 文件的情况下做到了这一点
