Bootstrap comment obtenir du texte à aligner verticalement dans un conteneur div
Quelle est la meilleure façon d'aligner verticalement le texte au milieu de sa colonne? La hauteur de l'image est définie statiquement dans le CSS.
J'ai essayé de définir un div externe à display: table et un div interne à display: table-cell avec vertical-align: middle mais cela n'a pas fonctionné non plus.
HTML
<section id="browse" class="browse">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-5">
<h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2>
</div>
<div class="col-md-1"></div>
<div class="col-md-6 col-sm-7 animation_container">
<img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/>
<img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/>
</div>
</div>
</div>
</section>
CSS
.browse .container, .blind_dating .container { padding-bottom: 0; }
.animation_container { position: relative; }
.browse .animation_container { height: 430px; }
.animation_img { position: absolute; bottom: 0; }
.animation_img1 { right: 25%; }
.animation_img2 { right: 25%; }
3 réponses
HTML:
Tout d'abord, nous devrons ajouter une classe à votre conteneur de texte afin que nous puissions y accéder et le styliser en conséquence.
<div class="col-xs-5 textContainer">
<h3 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h3>
</div>
CSS:
Ensuite, nous allons appliquer les styles suivants pour l'aligner verticalement, en fonction de la taille de l'image div à côté d'elle.
.textContainer {
height: 345px;
line-height: 340px;
}
.textContainer h3 {
vertical-align: middle;
display: inline-block;
}
Tout Est Fait! Ajustez la hauteur de ligne et la hauteur sur les styles ci-dessus si vous pensez qu'elle est encore légèrement décalée.
h2.text-left{
position:relative;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
Explication:
Le styletop:50% pousse essentiellement l'élément d'en-tête vers le bas à 50% du haut de l'élément parent. Les stylings translateY agissent également d'une manière similaire en déplaçant ensuite l'élément vers le bas 50% du haut.
Veuillez noter que cela fonctionne bien pour les en-têtes avec 1 (peut-être 2) lignes de texte car cela déplace simplement le haut de l'élément d'en-tête vers le bas 50% , puis le reste du contenu se remplit en dessous, ce qui signifie qu'avec plusieurs lignes de texte il semblerait être légèrement en dessous aligné verticalement.
Une solution possible pour plusieurs lignes serait d'utiliser un pourcentage légèrement inférieur à 50%.
N'auriez-vous pas pu simplement ajouter:
align-items:center;
À une nouvelle classe dans votre div de ligne. Essentiellement:
<div class="row align_center">
.align_center { align-items:center; }