Comment utiliser l’alignement vertical dans le bootstrap

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:

  • L’ 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.
  • Cela ne peut malheureusement pas être fait sans cette balise supplémentaire, peut-être inutile, dans votre code HTML.
  • Les arrière-plans sont inutiles – ils ne sont là que pour des fins de démonstration. Donc, vous n’avez pas besoin d’appliquer de règles spéciales aux row ou aux tags col-* .
  • Il est important de noter que l’étiquette interne ne s’étend pas à 100% de la largeur de son parent; Dans notre scénario, cela n’a pas d’importance, mais cela peut vous concerner. 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 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