web-dev-qa-db-fra.com

Bootstrap: Comment centrer le contenu dans la colonne?

Un scénario de cas d'utilisation simple consiste à utiliser une image ou tout autre contenu dans une colonne Bootstrap. Et souvent, ce contenu doit être centré horizontalement.

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 text-center">
            <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered">
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            some content not important at this moment
        </div>
    </div>
</div>

Dans la version 3.1.0, l'ajout de la classe text-center centrait l'image dans la colonne. Mais j'ai été obligé de passer à la version 3.3.4 pour résoudre d'autres problèmes et ce problème (centre de texte) est maintenant résolu. Je reste avec le problème comment centrer une image ou un autre contenu dans une colonne. Je voudrais éviter de devoir ajouter une classe aux éléments contenus car cela est sujet aux erreurs ou nécessite un autre div contenant.

htmlcsstwitter-bootstrap
58
f470071

Voulez-vous centrer une image? Très facile, Bootstrap est fourni avec deux classes, .center-block et text-center.

Utilisez le premier dans le cas où votre image serait un élément BLOCK. Par exemple, si vous ajoutez img-responsive class à votre img, le img devient un élément de bloc. Vous devriez le savoir si vous savez naviguer dans la console Web et voir les styles appliqués à un élément.

Vous ne voulez pas utiliser une classe? Pas de problème, voici le CSS bootstrap utilise. Vous pouvez créer une classe personnalisée ou écrire une règle CSS pour que l'élément corresponde à la classe Bootstrap.

 // In case you're dealing with a block element apply this to the element itself 
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}

// In case you're dealing with a inline element apply this to the parent 
.text-center {
   text-align:center
}
78
Alexander Solonik

Vous pouvez le faire en ajoutant un div, c'est-à-dire centerBlock. Et donnez cette propriété en CSS pour centrer l'image ou tout contenu. Voici le code:

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4">
            <div class="centerBlock">
                <img class="img-responsive" src="img/some-image.png" title="This image needs to be centered">
            </div>
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            Some content not important at this moment
        </div>
    </div>
</div>


// CSS

.centerBlock {
  display: table;
  margin: auto;
}
42
Ahmad Sharif