web-dev-qa-db-fra.com

centrer une ligne avec Bootstrap 3

Comment centrer une ligne (12 colonnes) dans Bootstrap 3? Je ne veux pas utiliser le offset

J'utilise cette façon mais pas travaillé.

    .col-centered{
        float: none;
        margin: 0 auto;
    }
    <div class="row" style="max-width: 300px;">
        <div class="col-md-12 col-xs-12 col-centered">
            <div class="input-group">
                <div class="input-group-btn">
                    <button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        All Items 
                                    <span class="caret"></span>
                    </button>
                    <ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">
                        <li><a href="#"> Test 1 </a></li>
        <li><a href="#"> Test 2 </a></li>
        <li><a href="#"> Test 3 </a></li>
        <li><a href="#"> Test 4 </a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>

Y a-t-il une solution à cela? Je n'ai pas d'idée pour ce travail.

csstwitter-bootstrap
44
john

Ce que vous faites ne fonctionne pas, car vous appliquez la marge: auto à la colonne de pleine largeur.

Enveloppez-le dans un div et centrez celui-là. Par exemple:

<div class="i-am-centered">
  <div class="row">...</div>
</div>

.

.i-am-centered { margin: auto; max-width: 300px;}

http://www.bootply.com/93751

C’est quand même une solution plus propre, car elle est plus expressive et vous ne voulez généralement pas jouer avec la grille.

51
hugo der hungrige

Pourquoi ne pas utiliser le système de grille?

Le système de grille bootstrap se compose de 12 colonnes. Par conséquent, si vous utilisez les colonnes "Moyenne", sa largeur est de 970px.

Ensuite, vous pouvez le diviser en 3 colonnes (12/3 = 4), utilisez donc 3 divs avec la classe "col-md-4":

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

Chacun aura une largeur maximale de 323 pixels. Laissez le premier et le dernier vides et utilisez celui du milieu pour obtenir votre contenu centré:

<div class="col-md-4"></div>
<div class="col-md-4">
   <p>Centered content.</p>
</div>
<div class="col-md-4"></div>
61
Waleed Asender

Au lieu de

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

Vous pouvez simplement utiliser

<div class="col-md-4 col-md-offset-4"></div>

Tant que vous ne voulez rien dans les colonnes 1 et 3, c'est une solution plus élégante. Le décalage "ajoute" 4 colonnes en avant, vous laissant 4 "en réserve" après.

PS Je me rends compte que la question initiale ne spécifie aucun décalage, mais au moins une réponse précédente utilise un hack CSS inutile si vous utilisez des décalages. Donc, pour être complet, je pense que cela est valable.

16
gonzo

Je sais que cette question visait spécifiquement Bootstrap 3, mais dans le cas où Bootstrap 4 utilisateurs tombent sur cette question, voici comment j'ai centré les lignes dans la v4:

<div class="container">
  <div class="row justify-content-center">
  ...

Cependant, je ne suis pas un pro de CSS. J'espère que ça aide quelqu'un.

15
rinderwahn

vous pouvez utiliser le système de grille sans ajouter de colonnes vides

<div class="col-xs-2 center-block" style="float:none"> ... </div>

changez col-xs-2 en fonction de votre mise en page.

vérifier l'aperçu: http://jsfiddle.net/rashivkp/h4869dja/

10
Rashi

Nous pouvons aussi utiliser col-md-offset comme ceci, cela nous éviterait un code divs supplémentaire. Donc, au lieu de trois div, nous pouvons utiliser un seul div:

<div class="col-md-4 col-md-offset-4">Centered content</div>
6
Faisal Ashfaq

Utilisez simplement la classe text-center

 <div class="row">
     <div class="col-md-12">
          <h3 class="text-center">Here Comes your Text</h3>
     </div>
 </div>
6
Saad Mujeeb

Ajoutez ceci à votre css:

.row-centered {
   text-align:center;
}


.col-centered {
   display:inline-block;
   float:none;
   /* reset the text-align */
   text-align:left;
   /* inline-block space fix */
   margin-right:-4px;
}

Ensuite, dans votre code HTML:

    <div class=" row row-centered">
        <div class="col-*-*  col-centered>
           Your content
        </div>
    </div>
6
Monero Jeanniton

Essayez ceci, ça marche!

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</div>
        </div>
    </div>
</div>

Ensuite, dans css, définissez la largeur de center div et center dans un document:

.center {
    margin: 0 auto;
    width: 80%;
}
4
Ezequiel

J'utilise text-align-center dans une rangée comme celle-ci

<div class="row tac">
    <h1>Centered content</h1>
</div>

<style>
 .tac { text-align: center}
</style>
1
tfa