Centrer une div à l’aide de balisage 3 Bootstrap ou CSS

Question

Centrer une div à l’aide de balisage 3 Bootstrap ou CSS

Demandé el 9 de Août, 2013: Quand la question a-t-elle été
219471 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Comment centrer une div de taille de la colonne à l'intérieur du conteneur (12 colonnes) dans Bootstrap 3.

Veuillez voir le démarreur de violon.

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Donc, je veux un div, avec une classe centered à être centré à l'intérieur du conteneur. Je peut utiliser une ligne si il y a plusieurs divs, mais pour l'instant je veux juste un div avec la taille d'une colonne centrée à l'intérieur du conteneur (12 colonnes).

Je ne suis pas aussi sûr que l'approche ci-dessus est assez bonne, car l'intention n'est pas de compenser l' div de moitié. Je n'ai pas besoin espaces libres à l'extérieur de l' div et le contenu de l' div diminuer en proportion. Je tiens à vide de l'espace en dehors de la div pour être uniformément répartie (rétrécir jusqu'à la largeur du conteneur == une colonne).

Demandé el 9 de Août, 2013 par bsr

Answer 1

5 Réponses

Answer 2

2026voto

koala_dev Points 19290

Il existe deux approches pour centrer une colonne <div> dans le Bootstrap 3:

Approche 1 (décalages):

La première approche utilise Bootstrap, propre à compenser les classes de sorte qu'il ne nécessite aucun changement dans le balisage et sans supplément de CSS. La clé est de définir un décalage égal à la moitié de la taille de la ligne. Ainsi, par exemple, une colonne de taille 2 serait centré par l'ajout d'un décalage de 5, (12-2)/2.

Dans le balisage, cela ressemblerait à:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Maintenant, il ya un inconvénient évident de cette méthode, il ne fonctionne que pour la même taille de colonne, de sorte que seules .col-X-2, .col-X-4, col-X-6, col-X-8 et col-X-10 sont pris en charge.

Approche 2 (l'ancien margin:auto)

Vous pouvez centre de toute taille de la colonne à l'aide de la éprouvées margin: 0 auto; technique, vous avez juste besoin de prendre soin de la variable qui est ajouté par Bootstrap du système de grille. Je recommande la définition d'un CSS personnalisé de classe comme suit:

.col-centered{
    float: none;
    margin: 0 auto;
}

Maintenant, vous pouvez l'ajouter à n'importe quelle colonne de la taille à la taille de l'écran et il va travailler de façon transparente avec Bootstrap du responsive layout :

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Remarque: Avec les deux techniques que vous pouvez passer de l' .row d'élément et d'avoir la colonne centrée à l'intérieur d'un .container mais vous remarquerez une différence dans la taille de la colonne en raison du rembourrage dans la classe conteneur.

Mise à jour:

Depuis la v3.0.1 Bootstrap a une classe nommée center-block qui utilise margin: 0 auto , mais manquant float:none. Vous pouvez l'ajouter à votre CSS pour le faire fonctionner avec le système de grille.

Répondu el 9 de Août, 2013 par koala_dev (19290 Points )

Answer 3

310voto

Skelly Points 27772

Comme Bootstrap 3.0.1 il y a un nouveau center-block de la classe helper..

http://getbootstrap.com/css/#helper-classes-center

Vous pouvez toujours utiliser text-center pour centrer le texte.

Démo: http://bootply.com/91632

Répondu el 3 de Décembre, 2013 par Skelly (27772 Points )

Answer 4

99voto

Sender Points 1397

Maintenant Bootstrap 3.1.1 est de travailler avec des .center-block, cette classe helper fonctionne avec le système à colonnes.

Bootstrap 3 De La Classe Helper Centre

Veuillez vérifier cette jsfiddle DÉMO

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Helper classes center

Ligne de la colonne à l'aide du centre col-center-block de la classe helper.

.col-center-block {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Répondu el 18 de Mars, 2014 par Sender (1397 Points )

Answer 5

58voto

Sagive SEO Points 346

Simplement ajouter ceci à votre fichier CSS (pas d'édition du Bootstrap CSS est le meilleur).

.center-block {float: none !important}

Pourquoi?

Bootstrap CSS utilise: margin: 0 auto;, mais il est écrasé par le flotteur
propriété de la taille du conteneur.

PS: Après l'ajout de cette classe n'oubliez pas de définir des classes par le bon ordre.

<div class="col-md-6 center-block">Example</div>

Répondu el 15 de Décembre, 2013 par Sagive SEO (346 Points )

Answer 6

39voto

Schmalzy Points 4430

Bootstrap 3 a maintenant une classe intégrée pour cette .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Si vous êtes toujours à l'aide de 2.X puis juste ajouter ceci dans votre CSS.

Répondu el 9 de Août, 2013 par Schmalzy (4430 Points )

Centrer une div à l’aide de balisage 3 Bootstrap ou CSS

Réponses

Approche 1 (décalages):

Approche 2 (l'ancien margin:auto)

Questions en vedette

Top Tags

Prograide.com

Powered by:

Centrer une div à l’aide de balisage 3 Bootstrap ou CSS

Réponses

Approche 1 (décalages):

Approche 2 (l'ancien margin:auto)

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: