如何使用Twitter Bootstrap水平地中心Glyphicons [英] How do I center Glyphicons horizontally using Twitter Bootstrap

问题描述

我试图将我的FontAwesome图标放在我的Twitter Bootstrap代码中。

这是我的HTML：

 < div id =frontpage-contentclass =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 laborias sit alias iusto nam quibusdam adificio rerum expedita autem itaque delectus iste mollitia perferendis sint libero accusamus 
 in。Enim，natus necessitatibus pariatur optio explicabo consequencesuntur 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 eveness 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，因此不是很方便。

解决方案

所有你需要的是用 text-align：center display：block c>在您的容器 div 中的 i 中，您将拥有它：

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

这是一个演示

编辑＃1： strong>因为这个答案似乎得到一些牵引，值得注意的是，更多的twitter-bootstrapy这样做会是什么 @SimoneMelloni在他们对这个问题的回答中建议，即。使用文本中心类。

请注意，这基本上与我的解决方案相同， text-center 设置为 text-align：center ，它只是使用twitter自举功能。 / p>

另请注意， text-align：center 仅适用于块级元素或显式设置 display：block 在我原来的答复上面。我需要指定，因为我在 i 上使用它，这是内嵌元素。

编辑＃2： $ c> center 元素：虽然它不是CSS但是HTML，这不是一个问题，更大的问题是它已被弃用。有关 MDN的文档，请参阅< center> 元素

I am trying to center my FontAwesome icons inside my Twitter Bootstrap code.

This is my 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 i elements.

I know I can center it, if I give to the surrounding div a static width and then position the i element with...

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

...but I don't want to give the surrounding div a static width.

So, how do I solve this problem, without applying static width?

Edit: Also I know of the center HTML element, but this wouldn't be CSS, and therefore not very handy.

解决方案

All you need is to define display:block with text-align:center in the i inside your container div and you'll have it:

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

Here is a demo

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-center class.

Note that this is basically the same as my solution, considering all text-center does is set text-align:center, it is just making use of a twitter bootstrap feature.

Also note that text-align:center only works on block-level elements or ones where you explicitly set display:block, as in my original answer above. There I needed to specify that because I used it on i, which is an inline element.

EDIT #2: I just saw your edit on the center element: while it is indeed not CSS but HTML, that's less of an issue, the bigger issue with it is that it's deprecated. See more info on it on MDN's doc on the <center> element

这篇关于如何使用Twitter Bootstrap水平地中心Glyphicons的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！