Estoy usando bootstrap 4 alpha 3.
Quiero el centro de la tarjeta horizontalmente en el centro a través de la página.

Preview /link: http://codepen.io/vaibhavsingh97/full/VjRAXW

He intentado de todas las diferentes opciones que aparecen en el proceso de arranque 4 ejemplo de la página de tarjetas.

¿Cómo puedo lograr esto?

OriginalEl autor Vaibhav Singh | 2016-08-19

2 Comentarios

  1. 40

    Agregar el css .tarjeta de

    .card {
            margin: 0 auto; /* Added */
            float: none; /* Added */
            margin-bottom: 10px; /* Added */
    }

    aquí es el lápiz

    ACTUALIZACIÓN:
    Puede utilizar la clase .mx-auto disponible en bootstrap 4 a centro de tarjetas.

    En bootstrap 4, al centro de una tarjeta en una cuadrícula de col, el uso de <div class=»col d-flex justificar-contenido-center»><div class=»tarjeta»></card></div>.
    La aplicación global es mala práctica, ver @ZimSystem de la manera correcta.
    Esto es más de una solución CSS de Bootstrap solución. Respuesta de abajo tiene más sentido.
    sólo añadir mx-auto resuelto el problema para mí! Gracias!

    OriginalEl autor Shahil M

  2. 50

    Actualización de 2018

    No hay necesidad de CSS extra, y hay múltiples centrado métodos de Bootstrap 4:

    • text-center para el centro de la display:inline elementos
    • mx-auto para el centrado display:block elementos dentro de display:flex (d-flex)
    • offset-* o mx-auto puede ser utilizado para el centro de la cuadrícula de columnas
    • o justify-content-center en row al centro de la cuadrícula de columnas

    mx-auto (auto eje x márgenes) centro dentro de display:flex los elementos que tienen un ancho definido, (%, vw, px, etc..). Flexbox es utilizado por defecto en las columnas de la cuadrícula, por lo que también hay varios métodos de centrado.

    En su caso, usted puede simplemente mx-auto a la cards.

    He utilizado este con el img en la tarjeta, pero he tenido que quitar la tarjeta-img-la parte superior.

    OriginalEl autor Zim

Dejar respuesta

Please enter your comment!
Please enter your name here