La alineación Vertical de inicio 4

Tengo la siguiente configuración de inicio 4: Bootply enlace

El elemento con el «Proveedor», texto en el que debe estar centrada verticalmente, tengo diferentes filas con el mismo código y quiero centrado. No hay solución que parece funcionar para mí.

Alguien puede encontrar aquí lo que hice mal y me apunte en la dirección correcta?

Gracias.

InformationsquelleAutor Nelsch | 2016-12-21

1 Kommentar

  1. 71

    puede utilizar el flex-xs-middle clase como esta..

    Bootstrap 4 5 Alfa

    <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 (Utilizando el Bootstrap 4 flexbox habilitado CSS)

    Bootstrap 4


    ACTUALIZACIÓN para el Bootstrap 4.0.0

    Ahora que Bootstrap 4 es flexbox por defecto hay muchos enfoques diferentes para la alineación vertical de usar: auto-márgenes, flexbox utils, o la pantalla utils junto con vertical align utils. En la primera «vertical align utils» parece obvio, pero estos sólo trabajo con en línea y visualización de la tabla de elementos. A continuación son el Bootstrap 4 centrado vertical de opciones. Recuerde, la alineación vertical es relativa a los padres de altura.


    1 – Centro Vertical Mediante Auto Márgenes:

    Otra manera vertical del centro es el uso de my-auto. Este centro el elemento dentro de su contenedor. Por ejemplo, h-100 hace la fila de altura completa, y my-auto le vertical del centro de la col-sm-12 columna.

    <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 Mediante Auto de los Márgenes de Demo

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

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

    2 – Centro Vertical con Flexbox:

    La alineación Vertical de inicio 4

    Desde Bootstrap 4 .row es ahora display:flex usted puede simplemente utilizar align-self-center en cualquier columna vertical del centro de…

           <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, el uso de align-items-center en todo el .row verticalmente centro de alinear 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>
    

    Centro Vertical de la Diferente Altura de las Columnas Demo

    Importante: El directo de los padres del elemento a ser alineados debe estar definido en altura!


    3 – Vertical En El Centro De La Pantalla Utils:

    Bootstrap 4 ha pantalla utils que puede ser utilizado para display:table, display:table-cell, display:inline, etc.. Estos pueden ser utilizados con el la alineación vertical utils para alinear en línea, inline-block o tabla de los elementos de las celdas.

    <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 Utilizando la Pantalla Utils Demo

    • Solución 1 funciona como un encanto y es muuuy simple y elegante. Amor, gracias.
    • Gracias por esta respuesta, es detallada y me ayudó a entender la mejor manera de hacer lo que yo necesitaba!
    • Ahora que Bootstrap se ha trasladado a la Beta, puede reorganizar el orden de su respuesta, tal que la forma estándar aparece primero? usted todavía puede dejar el código para el bootstrap 4 5 alfa a continuación

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea