Twitter Bootstrap 3, verticalmente centro de contenido [duplicar]

Esta pregunta ya tiene una respuesta aquí:

Sé que esto se ha preguntado mil veces, pero no puedo encontrar una manera de hacer que el texto y la imagen se centren verticalmente.

Estoy usando Twitter Bootstrap 3 con contenido dinámico, por lo que no sé el tamaño ni en el texto ni en la imagen. Además, quiero que todo responda.

He creado un bootply que resume el tipo de diseño que estoy tratando de lograr. Básicamente, quiero que el texto y la imagen verticalmente. El texto no siempre es más grande que la imagen.

¿Alguien puede ayudarme con esto, por favor?

Gracias.

Author: Zim, 2013-11-15
Source

2 answers

Puedes usar display:inline-block en lugar de float y vertical-align:middle con este CSS: 

.col-lg-4, .col-lg-8 {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

La demo http://bootply.com/94402

 66
Author: DaniP,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-15 16:48:54

La opción 1 es utilizar display:table-cell. Necesita desbobinar el Bootstrap col - * usando float:none..

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

Http://bootply.com/94394

La opción 2 es display:flex para alinear verticalmente la fila con flexbox: 

.row.center {
   display: flex;
   align-items: center;
}

Http://www.bootply.com/7rAuLpMCwr

El centrado vertical es muy diferente en Bootstrap 4. Vea esta respuesta para Bootstrap 4 https://stackoverflow.com/a/41464397/171456

 41
Author: Zim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:19