Bootstrap, wie Text in einem Div-Container vertikal auszurichten

Question

Was ist der beste/richtige Weg, um den Text vertikal in der Mitte der Spalte auszurichten? Die Bildhöhe wird im CSS statisch festgelegt.

Ich habe versucht, eine äußere div zu display: table und eine innere div zu display: table-cell mit vertical-align: middle, aber das hat auch nicht funktioniert.

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%; } 

Answer 1

HTML:

Zunächst müssen wir Ihrem Textcontainer eine Klasse hinzufügen, damit wir darauf zugreifen und sie entsprechend formatieren können.

<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:

Als nächstes werden wir die folgenden Stile gelten sie vertikal auszurichten, entsprechend der Größe des Bildes div daneben.

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

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

Alles Fertig! Passen Sie die Höhe und Höhe der Linien in den obigen Stilen an, wenn Sie glauben, dass die Ausrichtung immer noch geringfügig abweicht.

WORKING EXAMPLE

Answer 2

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

Erläuterung:

Die top: 50% Stil im Wesentlichen das Element Kopf nach unten drückt 50% von der Spitze des übergeordneten Elements. Die translateY-Stylings verhalten sich auch in ähnlicher Weise, indem sie das Element um 50% von oben nach unten bewegen.

Bitte beachten Sie, dass dies gut für Header mit 1 (vielleicht 2) Zeilen Text funktioniert, wie dies einfach die des Header-Element um 50% nach unten und dann den Rest des Inhalts darunter, was bedeutet dass bei mehreren Textzeilen es scheint, dass es etwas unterhalb vertikal ausgerichtet ist.

Eine mögliche Lösung für mehrere Zeilen wäre es, einen Prozentsatz von etwas weniger als 50% zu verwenden.

Answer 3

Könnten Sie nicht einfach hinzugefügt haben:

align-items:center; 

zu einer neuen Klasse in Ihrer Reihe div. Im Wesentlichen: