web-dev-qa-db-ja.com

Twitter Bootstrapを使用してグリフィコンを水平方向に中央揃えするには

FontAwesomeアイコンをTwitter Bootstrap code。

これは私の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に静的な幅を与えたくありません。

では、静的な幅を適用せずにこの問題を解決するにはどうすればよいですか？

編集： HTML要素centerも知っていますが、これはCSSではないため、あまり便利ではありません。

htmlcsstwitter-bootstrapfont-awesomeglyphicons
19
LoveAndHappiness

必要なのは、コンテナ内のiにdisplay:blockでtext-align:centerを定義すること_divだけです。

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

デモはこちら

EDIT＃1：この答えは牽引力を得るように思えるので、これはもっと「Twitter-bootstrapy」-方法がそうすることに注意する価値がある @ SimoneMelloniがこの質問への回答で提案したもの 、つまりtext-centerクラスの使用。

これは基本的に私のソリューションと同じであることに注意してください。すべてのtext-centerがtext-align:centerに設定されており、Twitter bootstrap=機能を使用しているだけです。

また、text-align:centerは ブロックレベルの要素 、または上記の最初の答えのようにdisplay:blockを明示的に設定したものでのみ機能することに注意してください。 iで使用したため、それを指定する必要がありました。これは インライン要素 です。

EDIT＃2：center要素の編集を見ただけです：実際にはCSSではなくHTMLですが、それほど問題ではありません、それに関するより大きな問題は、廃止されることです。詳細については <center>要素に関するMDNのドキュメント をご覧ください。

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

Cssファイルを開かずにトリックをしました

13
Simone Melloni