Comment utiliser verticale aligner dans le bootstrap
Problème Simple: Comment puis-je alignées à la verticale d'un col à l'intérieur d'un col à l'aide de bootstrap? Exemple ici (je veux alignez verticalement child1a et child1b):
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>
Mise à JOUR
Un peu de 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;
}
- La solution fournie dans: [stackoverflow.com/questions/20547819/... fonctionne très bien! [1]: stackoverflow.com/questions/20547819/...
Vous devez vous connecter pour publier un commentaire.
table-layout: fixed
empêche la rupture de la fonctionnalité de la col-* les classes.float: none
à.child
. D'autredisplay
a été considéré commeblock
n'importe quoi (au lieu detable-cell
). Bizarre, car chacun semble heureux avec la solution proposée. Je suis en utilisant Bootstrap 3.3.5, rien de fantaisie.float: center
impliquedisplay: block
et je suppose qu'il a eu la priorité surdisplay: table-cell
.float: none
à.child
pour le faire fonctionner. Excellent travail, btw. Le seul qui a fonctionné pour moi, après plusieurs très-voté réponses.Peut-être un vieux sujet, mais si quelqu'un a besoin d'aide avec cela, procédez de la manière suivante par exemple (ce qui place le texte dans la ligne du milieu de l'image si elle a plus de hauteur que le texte).
HTML:
CSS:
La chose la plus importante que j'ai raté a été "float: none;" depuis qu'il a obtenu à flotteur gauche de bootstrap col attributs.
Cheers!
Pour le parent:
display: table;
Pour l'enfant:
display: table-cell;
Puis ajouter
vertical-align: middle;
Je peux faire un violon, mais de temps à la maison maintenant, yay!
OK voici la belle violon: http://jsfiddle.net/lharby/AJAhR/
J'ai dû ajouter width: 100%; pour afficher le tableau pour corriger un étrange comportement dans IE et FF, quand j'ai utilisé cet exemple. IE et FF eu quelques problèmes d'affichage de la col-md-* les étiquettes à la bonne largeur
http://jsfiddle.net/b9chris/zN39r/
HTML:
CSS:
Notes importantes:
vertical-align: middle; display: table-cell;
doit être appliqué à une balise qui n'a pas de Bootstrap classes appliqué; il ne peut êtrecol-*
, unrow
, etc.row
oucol-*
balises.http://jsfiddle.net/b9chris/zN39r/1/
CSS:
Avis de l'ajout d'un tableau-mise en page et les propriétés d'affichage sur le
col-*
balises. Ce doit être appliqué à la balise(s) qui ontcol-*
appliquée; il n'est pas de l'aide sur d'autres balises.Prinsen la réponse est le meilleur choix. Mais, pour résoudre le problème où les colonnes ne s'affaissent pas son code doit être entouré par une vérification des supports de déclaration. De cette façon, ces styles ne sont utilisés que lorsque les grandes colonnes sont actifs. Voici la mise à jour de réponse complète.
HTML:
CSS:
Vous dire que vous souhaitez 1b et 1b d'être mis de côté par côté?
Avec Bootstrap 4, vous pouvez le faire beaucoup plus facilement: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment