Verticalement centre image réactive dans une colonne de bootstrap
J'ai passé en revue toutes les questions /réponses, et ne peut toujours pas obtenir une solution de travail, donc j'aimerais avoir des commentaires sur mon code ci-dessous.
Je préfère ne pas utiliser codée en dur les tailles d'image (nombre de pixels) dans mon code, et je suis prêt à utiliser une combinaison de Moins, CSS ou Javascript dans la solution.
L'image doit être centré verticalement et horizontalement dans le Bootstrap de la colonne, et de rester centré, même lorsque l'écran est redimensionné.
Mon code HTML:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="panel">
Some content
</div>
</div>
<div class="col-md-2">
<img src="images/myimage.png" class="img-responsive center-block">
</div>
<div class="col-md-5">
<div class="panel>
Some content
</div>
</div>
</div>
</div>
</div>
Vous devez vous connecter pour publier un commentaire.
Voici une option à l'aide de transformer:
http://www.bootply.com/YG8vpg1rIf
col-md-2
avec le tops des colonnes de chaque côté (plus précisément: le haut de chaque élément du panneau dans la colonne). Des idées?height:100%
Vous pouvez surmonter le vertical align problème à l'aide de css Flexbox.
Ajouter la classe "vertical_center" à la div parent.
Ensuite ajouter le code css suivant
.vertical_center
à la<div class="row">
il détruit la réactivité à de plus petites tailles d'écran, c'est à dire quand les colonnes de l'effondrement sur des lignes distinctes. Dois-je appliquer le.vertical_center
classe quelque part d'autre, ou de la structure différemment? Je vous remercie.vertical_center
sur lecol
et sur laimg
j'ai mis la classecenter-block
Espère que cela permettra de résoudre votre problème.
Utiliser la propriété CSS suivante pour la fabrication de l'image centrée verticalement
img { vertical-align: middle; }
Pour l'alignement horizontal d'utiliser un nom de classe
text-center
de bootstrap avec l'autre nom de la classe de votre div si yu ont. Comme,<div class="col-md-2 text-center"> ... </div>
.Cela rendra le contenu de la div centrée horizontalement.