html - imagen - centrar texto verticalmente bootstrap

Bootstrap cómo obtener texto para alinear verticalmente en un contenedor div

Question

¿Cuál es la mejor manera de alinear verticalmente el texto en el centro de su columna? La altura de la imagen se establece estáticamente en el CSS.

He intentado configurar un div externo para display: table y un div interno para display: table-cell con vertical-align: middle pero eso tampoco funcionó.

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

¿No podría simplemente haber añadido:

align-items:center;

a una nueva clase en tu fila div. Esencialmente:

<div class="row align_center">

.align_center { align-items:center; }

Answer 2

HTML:

Primero, tendremos que agregar una clase a su contenedor de texto para que podamos acceder y personalizarla en consecuencia.

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

A continuación, aplicaremos los siguientes estilos para alinearlo verticalmente, de acuerdo con el tamaño de la imagen div a su lado.

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

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

¡Todo listo! Ajuste la altura de la línea y la altura en los estilos anteriores si cree que todavía está ligeramente fuera de alineación.

Ejemplo de trabajo

Answer 3

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

Explicación:

El estilo de arriba: 50% esencialmente empuja el elemento del encabezado hacia abajo 50% desde la parte superior del elemento principal. Los estilos de traslación también actúan de manera similar al mover el elemento hacia abajo un 50% desde la parte superior.

Tenga en cuenta que esto funciona bien para los encabezados con 1 (quizás 2) líneas de texto, ya que simplemente mueve la parte superior del elemento del encabezado hacia abajo en un 50% y luego el resto del contenido se completa debajo de eso, lo que significa que con varias líneas de texto parecería estar ligeramente por debajo de la alineación vertical.

Una posible solución para varias líneas sería utilizar un porcentaje ligeramente inferior al 50%.