web-dev-qa-db-de.com

Wie zentriere ich Glyphicons horizontal mit Twitter Bootstrap

Ich versuche, meine FontAwesome-Symbole in meinem Twitter Bootstrap Code zu zentrieren.

Das ist mein 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>

Und hier ist, was ich bereits ausprobiert habe:

#frontpage-content {
    background-color: $bgDefault;
    i {
        text-align:center;
    }
    span {
        text-align:center;
    }
}

Funktioniert perfekt für den Text, aber nicht für die i -Elemente.

Ich weiß, dass ich es zentrieren kann, wenn ich dem umgebenden div eine statische Breite gebe und dann das i -Element mit ... positioniere.

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

... aber ich möchte dem umgebenden div keine statische Breite geben.

Wie löse ich dieses Problem, ohne die statische Breite anzuwenden?

Edit: Auch ich kenne das HTML-Element center, aber das wäre kein CSS und daher nicht sehr praktisch.

19

Sie müssen lediglich display:block Mit text-align:center In i in Ihrem Container div definieren und haben es:

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

Hier ist eine Demo

BEARBEITEN 1: Da diese Antwort anscheinend eine gewisse Anziehungskraft hat, ist anzumerken, dass dies eher mit der "Twitter-Bootstrapy" -Methode möglich ist sei was @ SimoneMelloni schlug in ihrer Antwort auf diese Frage vor , dh. die Verwendung der Klasse text-center.

Beachten Sie, dass dies im Grunde das gleiche ist wie meine Lösung, wenn man bedenkt, dass alles, was text-center Tut, auf text-align:center Gesetzt ist, es wird lediglich eine Twitter bootstrap) -Funktion verwendet.

Beachten Sie auch, dass text-align:center Nur für Block-Level-Elemente oder für Elemente funktioniert, bei denen Sie display:block Explizit festlegen, wie in meiner ursprünglichen Antwort oben. Dort musste ich das angeben, weil ich es für i verwendet habe, was ein Inline-Element ist.

BEARBEITUNG 2: Ich habe gerade Ihre Bearbeitung am center -Element gesehen: Obwohl es sich in der Tat nicht um CSS, sondern um HTML handelt, ist das weniger ein Problem, das größere Problem ist, dass es veraltet ist. Weitere Informationen dazu finden Sie unter MDNs Dokument im Element <center>

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

Hat den Trick ohne Öffnen der CSS-Datei

13
Simone Melloni