Estoy luchando para centro de una imagen utilizando sólo Bootstrap CSS clases. Ya lo he intentado varias cosas. Uno fue la adición de Bootstrap CSS-clase mx-auto a la img elemento, pero no hace nada.

Se agradece la ayuda.

<div class="container">
    <div class="row">
        <div class="col-4 mx-auto">
            <img class=""...> <!-- center this image within the column -->

            <form...>

            <p...>
            <p...>
            <p...>                
        </div>
    </div>
</div>

OriginalEl autor Daniel | 2017-04-05

2 Comentarios

  1. 64

    Imagen por defecto se muestra como inline-block, usted necesita para mostrar como bloque, para centro con .mx-auto. Esto se puede hacer con construido-en .d-block:

    <div class="container">
        <div class="row">
            <div class="col-4">
                <img class="mx-auto d-block" src="...">  
            </div>
        </div>
    </div>

    O dejarlo como inline-block y lo envolvió en un div con .text-center:

    <div class="container">
        <div class="row">
            <div class="col-4">
              <div class="text-center">
                <img src="..."> 
              </div>     
            </div>
        </div>
    </div>

    Hice un el violín mostrando en ambos sentidos.
    Están documentados aquí así.

    OriginalEl autor tmg

  2. 14

    Desde el img es un elemento en línea, Sólo tiene que utilizar text-center en su contenedor. El uso de mx-auto el centro del contenedor (columna).

    <div class="row">
        <div class="col-4 mx-auto text-center">
            <img src="..">
        </div>
    </div>

    Si desea que el centro de la imagen (y no el contenido de la columna), hacen que la imagen display:block el uso de la d-block de la clase y, a continuación, mx-auto de trabajo.

    <div class="row">
      <div class="col-4">
        <img class="mx-auto d-block" src="..">
      </div>
    </div>

    Demo: http://www.codeply.com/go/iakGGLdB8s

    OriginalEl autor Zim

Dejar respuesta

Please enter your comment!
Please enter your name here