web-dev-qa-db-fra.com

Comment centrer les glyphicons horizontalement en utilisant Twitter Bootstrap

J'essaie de centrer mes icônes FontAwesome dans mon Twitter Bootstrap code.

Voici mon 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>

Et voici ce que j'ai déjà essayé:

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

Fonctionne parfaitement pour le texte, mais ne fonctionne pas pour les éléments i.

Je sais que je peux le centrer, si je donne à la div environnante une largeur statique, puis positionne l'élément i avec ...

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

... mais je ne veux pas donner à la div environnante une largeur statique.

Alors, comment puis-je résoudre ce problème, sans appliquer de largeur statique?

Edit: Je connais aussi l'élément center HTML, mais ce ne serait pas CSS, et donc pas très pratique.

htmlcsstwitter-bootstrapfont-awesomeglyphicons
19
LoveAndHappiness

Il vous suffit de définir display:block avec text-align:center dans le i à l'intérieur de votre conteneur div et vous l'avez:

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

Voici une démo

EDIT # 1: Comme cette réponse semble obtenir une certaine traction, il convient de noter que la manière la plus "Twitter-bootstrapy" de le faire serait être ce que @ SimoneMelloni a suggéré dans sa réponse à cette question , ie. l'utilisation du text-center classe.

Notez que c'est fondamentalement la même que ma solution, compte tenu de tous les text-center est défini text-align:center, il utilise simplement une fonction Twitter bootstrap.

Notez également que text-align:center ne fonctionne que sur éléments de niveau bloc ou sur ceux où vous définissez explicitement display:block, comme dans ma réponse originale ci-dessus. Là, je devais spécifier cela parce que je l'ai utilisé sur i, qui est un élément en ligne .

EDIT # 2: Je viens de voir votre édition sur l'élément center: alors que ce n'est pas du CSS mais du HTML, c'est moins problème, le plus gros problème avec lui est qu'il est obsolète. Voir plus d'informations à ce sujet sur doc de MDN sur le <center> élément

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

A fait l'affaire sans ouvrir le fichier css

13
Simone Melloni