Imagen de alineación vertical Bootstrap

En este sitio web: http://www.livenews.surf/ Quiero hacer que las imágenes de noticias y el texto se alineen verticalmente en el medio, ¿cómo puedo hacer eso?

Use las siguientes clases en su contenido div.row en lugar de CSS personalizado como se sugiere para bootstrap 4.

d-flex flex-wrap align-items-center

La solución más fácil es usar Flexbox (consulte las especificaciones para obtener más detalles sobre su uso).

Para este caso particular, asigne una clase personalizada a cada uno de sus contenidos que contengan div (actualmente solo tiene .col-md-11), por ejemplo, clase “contenido” y agregue este código a su hoja de estilo

.content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

Pequeña explicación de código: align-items alinea los elementos verticalmente, ya que dejamos la dirección flexible predeterminada, que es fila y flex-wrap permitirá que nuestro contenedor principal envuelva a los niños a la siguiente línea (el valor predeterminado es nowrap).

Manten eso en mente No he incluido prefijos de proveedores. por el bien de esta respuesta, sin embargo, le recomiendo encarecidamente que lo haga, utilizando una herramienta como Autoprefixer.

Bueno, como está utilizando columnas de arranque, deberá seguir un par de pasos como se explica a continuación:

Como caso general, la estructura html de su página web es la siguiente:

<div class="col-md-11">
    <div class="row">
        <div class="col-md-5">
            <a href="#">
                <img src="images/image.jgp">
            </a>
        </div>
        <div class="col-md-7">
           // text goes here
        </div>
    </div>
</div>

En primer lugar, deberá hacer que la altura de ambas columnas (imagen + texto) sea la misma. Para esto puedes usar jQuery altura del partido. Después de eso, puede hacer que sus imágenes estén centradas verticalmente con la ayuda del siguiente cambio.

<div class="col-md-5 photo">
    <a href="#">
        <img src="images/image.jgp">
    </a>
</div>

.photo {
    display: table;
}
.photo a {
    vertical-align: middle;
    display: table-cell;
}
.photo img {
    display: block;
    height: auto;
    width: 100%;
}

Aquí está Plnkr.