Problème simple: Comment aligner verticalement un col dans un col en utilisant bootstrap? Exemple ici (je veux aligner verticalement child1a et child1b):
http://bootply.com/73666
HTML
Child content 1a Child content 1b Child content 2
Child content 2
Child content 2
Child content 2
Child content 2
METTRE À JOUR
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; }
.parent { display: table; table-layout: fixed; } .child { display:table-cell; vertical-align:middle; text-align:center; }
table-layout: fixed empêche de briser la fonctionnalité des classes col- *.
Peut-être un ancien sujet, mais si quelqu’un a besoin d’aide pour cela, par exemple (ceci met le texte sur la ligne médiane de l’image s’il a une hauteur plus grande que le texte).
HTML:
img text
CSS:
.display-table{ display: table; table-layout: fixed; } .display-cell{ display: table-cell; vertical-align: middle; float: none; }
La chose importante qui m’a échappé était “float: none;” Depuis, il est parti de l’atsortingbut bootstrap col.
À votre santé!
Pour le parent: display: table;
Pour l’enfant: display: table-cell;
Puis ajoutez vertical-align: middle;
Je peux faire un violon mais le temps de la maison maintenant, yay!
OK voici le beau violon: http://jsfiddle.net/lharby/AJAhR/
.parent { display:table; } .child { display:table-cell; vertical-align:middle; text-align:center; }
Je devais append de la largeur: 100%; afficher le tableau pour corriger certains comportements étranges dans IE et FF, lorsque j’ai utilisé cet exemple. IE et FF ont rencontré des problèmes d’affichage des 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; }
http://jsfiddle.net/b9chris/zN39r/
HTML:
This is some text.
This is some more.
CSS:
div.item div h4 { height: 60px; vertical-align: middle; display: table-cell; }
Notes IMPORTANTES:
vertical-align: middle; display: table-cell; vertical-align: middle; display: table-cell; doit être appliqué à une balise pour laquelle aucune classe Bootstrap n’est appliquée; ce ne peut pas être un col-* , une row , etc. row ou aux tags col-* . 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 mise en page de la table et les propriétés d’affichage sur les balises col-* . Cela doit être appliqué à la ou aux balises auxquelles col-* appliqué; cela ne va pas aider sur les autres tags.
La réponse de Prinsen est le meilleur choix. Mais, pour résoudre le problème où les colonnes ne s’effondrent pas, son code doit être entouré d’une déclaration de vérification de support. De cette manière, ces styles ne sont appliqués que lorsque les colonnes les plus grandes sont actives. Voici la réponse complète mise à jour.
HTML:
img text
CSS:
@media (min-width: 768px){ .display-table{ display: table; table-layout: fixed; } .display-cell{ display: table-cell; vertical-align: middle; float: none; } }
Vous voulez dire que vous voulez que 1b et 1b soient côte à côte?
Child content 1a Child content 1b
Avec Bootstrap 4, vous pouvez le faire beaucoup plus facilement: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment