web-dev-qa-db-fra.com

Bootstrap Comment obtenir un texte à aligner verticalement dans un conteneur div

Quel est le meilleur/bon moyen d’aligner verticalement le texte au milieu de sa colonne? La hauteur de l'image est définie de manière statique dans le CSS.

J'ai essayé de mettre une div externe à display: table et une division intérieure à display: table-cell avec vertical-align: middle mais ça n'a pas marché non plus.

enter image description here

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%; }
htmlcsstwitter-bootstraptwitter-bootstrap-3vertical-alignment
22
The Nomad

HTML:

Premièrement, nous devrons ajouter une classe à votre conteneur de texte pour pouvoir y accéder et la styler 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 appliquerons les styles suivants pour l’aligner verticalement, en fonction de la taille de l'image div située à côté.

.textContainer { 
    height: 345px; 
    line-height: 340px;
}

.textContainer h3 {
    vertical-align: middle;
    display: inline-block;
}

Terminé! Ajustez la hauteur de ligne et la hauteur des styles ci-dessus si vous pensez qu’elle est toujours légèrement désalignée.

EXEMPLE DE TRAVAIL

36
Fizzix
h2.text-left{
  position:relative;
  top:50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

Explication:

Le style top: 50% pousse essentiellement l’élément d’en-tête à 50% du haut de l’élément parent. Les styles de traduction agissent également de manière similaire en déplaçant l'élément de 50% à partir 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 de 50%, puis le reste du contenu est rempli en dessous, ce qui Cela signifie qu’avec plusieurs lignes de texte, il semblerait qu’il soit légèrement en dessous de l’alignement vertical.

Un correctif possible pour plusieurs lignes consisterait à utiliser un pourcentage légèrement inférieur à 50%.

9
Brian