如何使用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一個靜態寬度。

那么，如何在不應用靜態寬度的情況下解決此問題呢？

編輯：我也知道center HTML元素，但這不是CSS，因此不是很方便。

Answer 1

您所需要做的就是在容器div中的i定義display:block與text-align:center ，您將擁有：

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

這是一個演示

編輯＃1：由於此答案似乎有一定的吸引力，所以值得注意的是，這樣做的更多“ twitter-bootstrapy”方式將是@SimoneMelloni在對這個問題的答案中建議的內容 。 使用text-center類。

請注意，這與我的解決方案基本相同，考慮到所有text-center都設置了text-align:center ，它只是利用了twitter bootstrap功能。

還要注意， text-align:center僅適用於塊級元素或顯式設置display:block 元素 ，如上面我的原始答案所示。 我需要指定該位置，因為我在i標記（即內聯元素）上使用了它。

編輯＃2：我剛剛在center元素上看到了[OP]編輯：雖然它的確不是CSS而是HTML，但這並不是一個大問題，但更大的問題是它已經過時了。 在<center>元素上的MDN文檔中查看更多信息

Answer 2

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

沒有打開css文件就完成了技巧