web-dev-qa-db-fra.com

Comment utiliser l'alignement vertical dans bootstrap

Problème simple: comment aligner verticalement un col dans un col à l’aide de bootstrap? Exemple ici (je veux aligner verticalement child1a et child1b):

http://bootply.com/73666

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>


  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

UPDATE

Quelques CSS:

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;


}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}
css3twitter-bootstraptwitter-bootstrap-3
51
alias51
.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed empêche de casser la fonctionnalité des classes de couleurs.

69
magirtopcu

Peut-être un vieux sujet, mais si quelqu'un a besoin d'aide supplémentaire avec ceci, procédez comme suit par exemple (cela place le texte dans la ligne médiane de l'image s'il a une hauteur plus grande que le texte).

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS:

.display-table{
    display: table;
    table-layout: fixed;
}

.display-cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
}

La chose importante que j'ai manquée était "float: none;" depuis qu'il a été laissé à flot des attributs bootstrap col.

À votre santé!

41
prinsen

Pour le parent: display: table;

Pour l'enfant: display: table-cell;

Ajoutez ensuite vertical-align: middle;

Je peux faire du violon, mais le temps à la maison maintenant, yay!

OK voici le charmant violon: http://jsfiddle.net/lharby/AJAhR/

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}
8
lharby

Je devais ajouter largeur: 100%; afficher un tableau pour corriger un comportement étrange dans IE et FF, lorsque j'ai utilisé cet exemple. IE et FF ont eu quelques problèmes pour afficher les balises col-md- * à la bonne largeur

.display-table {
        display: table;
        table-layout: fixed;
        width: 100%;
}

.display-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
}
6
southz rgw

http://jsfiddle.net/b9chris/zN39r/

HTML:

<div class="item row">
    <div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
    <div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>

CSS:

div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
}

Notes IMPORTANTES:

  • Le vertical-align: middle; display: table-cell; doit être appliqué à une balise pour laquelle aucune classe Bootstrap n'est appliquée; il ne peut s'agir d'un col-*, d'un row, etc.
  • Cela ne peut être fait sans cette balise supplémentaire, éventuellement inutile, dans votre code HTML, malheureusement.
  • Les arrière-plans ne sont pas nécessaires - ils ne sont là que pour la démonstration. Vous n'avez donc pas besoin d'appliquer de règles spéciales aux balises row ou col-*.
  • Il est important de noter que la balise interne ne s'étend pas à 100% de la largeur de son parent; dans notre scénario, cela n'avait pas d'importance, mais cela pourrait vous intéresser. Si c'est le cas, vous vous retrouvez avec quelque chose de plus proche des autres réponses ici:

http://jsfiddle.net/b9chris/zN39r/1/

CSS:

div.item div {
    background: #fdd;
    table-layout: fixed;
    display: table;
}
div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
    background: #eee;
}

Notez la disposition de la table et les propriétés d'affichage ajoutées sur les balises col-*. Ceci doit être appliqué aux balises qui ont col-* appliqué; ça n'aidera pas les autres tags.

2
Chris Moschini

La réponse de Prinsen est le meilleur choix. Mais, pour résoudre le problème où les colonnes ne se réduisent pas, son code doit être entouré d'une instruction de vérification du support. De cette façon, ces styles ne sont appliqués que lorsque les plus grandes colonnes sont actives. Voici la réponse complète mise à jour.

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS:

@media (min-width: 768px){
   .display-table{
       display: table;
       table-layout: fixed;
   }

   .display-cell{
       display: table-cell;
       vertical-align: middle;
       float: none;
   }
}
1
Z3NF1N1TY