bootstrap-4 - texto - centrar verticalmente bootstrap

Alineación vertical en Bootstrap 4

Question

Tengo la siguiente configuración en Bootstrap 4: enlace de arranque

El elemento con el texto "Proveedor" debe estar centrado verticalmente, tengo diferentes filas con el mismo código y quiero que estén centradas. Ninguna solución parece funcionar para mí.

¿Puede alguien encontrar lo que hice mal y señalarme en la dirección correcta?

Gracias.

Answer 1

Puede usar la clase flex-xs-middle esta manera ...

Bootstrap 4 Alpha 5

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5 (Uso del CSS habilitado para Bootstrap 4 flexbox)

Bootstrap 4

ACTUALIZACIÓN para Bootstrap 4.0.0

Ahora que Bootstrap 4 es flexbox de manera predeterminada, existen muchos enfoques diferentes para la alineación vertical: auto-margins , utilidades de flexbox o utilidades de visualización junto con utilidades de alineación vertical . Al principio, "utilidades de alineación vertical" parece obvio, pero estas solo funcionan con elementos de visualización en línea y de tabla. A continuación se encuentran las opciones de centrado vertical Bootstrap 4. Recuerde, la alineación vertical es relativa a la altura del padre .

1 - Centro vertical usando márgenes automáticos:

Otra forma de centrar verticalmente es usar my-auto . Esto centrará el elemento dentro de su contenedor. Por ejemplo, h-100 hace que la fila tenga altura completa, y my-auto centrará verticalmente la col-sm-12 .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Centro vertical con demostración de márgenes automáticos

my-auto representa márgenes en el eje vertical y y es equivalente a:

margin-top: auto;
margin-bottom: auto;

2 - Centro vertical con Flexbox:

Dado que Bootstrap 4 .row ahora se display:flex , simplemente puede usar align-self-center en cualquier columna para centrarla verticalmente ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

o use align-items-center en todo el .row para alinear verticalmente todos los col-* en la fila ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Demostración de columnas de altura vertical de centro vertical

Importante : ¡El elemento primario directo del elemento a alinear debe tener una altura definida !

3 - Centro vertical usando las utilidades de pantalla:

Bootstrap 4 tiene utilidades de visualización que se pueden usar para display:table , display:table-cell , display:inline , etc. Estos se pueden usar con las utilidades de alineación vertical para alinear elementos de celda en línea, bloque en línea o de tabla.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Centro vertical con demostración de utilidades de pantalla