Centrar una img-responsive bootstrap

Question

Sé que seguramente sea sencillo, pero no consigo centrar la imagen. Usando HTML5 y Bootstrap;

    <div class="col-md-6 ">
        <img src="../img/012.jpg" class="img-responsive" alt="titulo"/>
        <div class="h-30"></div>
    </div>

Dejo el código sin más. Según he buscado class="img-responsive" causa bastantes problemas a la hora de centrar pero es lo que busco, ya he probado de muchas maneras, incluyendo este vídeo que es bastante reciente.
Gracias.

Edito: He conseguido "centrar" la imagen. Pongo comillas por que lo que hago es añadir estos códigos al bootstrap.min.css:

.centrar-2{display: block; padding-left: 200px;}
.centrar-1{display: block; padding-left: 250px;}
.centrar{display: block; padding-left: 300px;}
.centrar1{display: block; padding-left: 350px;}
.centrar2{display: block; padding-left: 400px;}

No es la forma correcta porque las imagenes no miden lo mismo y prácticamente tengo que crear una propiedad diferente para cada imagen, a parte de que no se consigue el centro exacto. Pongo esto porque al menos he conseguido mover la imagen, por si a alguien se le ocurre una idea a partir de esto.

SOLUCIÓN Finalmente lo resolví añadiendo las propiedades display: block; margin-left: auto; margin-right: auto; a cada col-md por separado. Por ejemplo, el col-md-6 quedaría así:

col-md-6 {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Es responsive y ajusta el tamaño de cada imagen al gusto y la centra. Perfecto.

en el video usa `style="margin: 0 auto"` en la imagen, lo probaste? — rnrneverdies, May 25 '17 at 21:54
Intenta reproducir el código que tienes actualmente en esta página: https://jsfiddle.net/. Allí podrás añadir también bootstrap para las pruebas y guardar el script para que el resto podamos acceder a el mediante el link. Así podremos saber mejor lo que te pasa. — Francisco Romero, May 26 '17 at 15:58
¿lo quieres centrar en el div o en el centro del navegador? — Rene Limon, May 26 '17 at 22:29
@S0NIC22 no agregues la respuesta en tu pregunta, en cambio deberías publicar como respuesta — Mariano, May 28 '17 at 00:26

Patricio Moraga · Answer 1 · 2018-05-10T20:00:54.923

3

Resulelto solo con Bootstrap 4.1

url info https://getbootstrap.com/docs/4.1/content/images/#aligning-images

class="mx-auto d-block"

<div class="card border-white text-white bg-dark">
    <div class="card-header">
        TITLE
    </div>  
    <img class="mx-auto d-block" src="03.png" alt="Card image cap">
    <div class="card-body">
        <h4 class="card-title">Title</h4>
        <p class="card-text">Text</p>
    </div>
    <div class="card-footer">
        Any text
    </div>
</div>

saludos.

edited May 10 '18 at 20:00

answered May 09 '18 at 19:22

Patricio Moraga

31
3

Para que la respuesta tenga mayor posibilidad de ser aceptada, editala y agrega mas información de como llegaste a la solución. Si tienes dudas lee **[answer]** – Raul Cacacho May 09 '18 at 19:31

score 3 · Answer 2 · answered May 25 '17 at 22:03

Si lo que quieres es centar una imagen tanto verticalmente como horizontalmente puedes utilizar las propiedades position: relative y position: absolute combinadas con las propiedades top, left, bottom, right y los márgenes automáticos para centrar la imagen verticalmente y horizontalmente con respecto al div.

#centrador{
  position: relative;
  width: 400px;
  height: 400px;
  background-color: red;
}

#imagen{
    position: absolute;
    width: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

<div id="centrador">
   <img id="imagen" src="https://s-media-cache-ak0.pinimg.com/736x/c4/76/27/c476278504682e622fabe9b0932098c3.jpg">
</div>

Si por el contrario lo que quieres es centrar unicamente horizontalmente la imagen dentro del div lo que puedes hacer es usar text-align: center para centar la imagen dentro de tu div ya que la imagen es un elemento inline por defecto, es decir, se comporta como cualquier elemento de tipo texto.

#centrador{
  text-align: center;
  width: 400px;
  height: 400px;
  background-color: red;
}

#imagen{
    width: 100px;
}

<div id="centrador">
   <img id="imagen" src="https://s-media-cache-ak0.pinimg.com/736x/c4/76/27/c476278504682e622fabe9b0932098c3.jpg">
</div>

Si tienes cualquier duda sobre posicionamiento (con position: relative y position: absolute) y como utilizarlo puedes consultar mi pregunta-respuesta aquí.

@S0NIC22 ¿Podrías poner el código que tienes actualmente? — Francisco Romero, May 26 '17 at 13:33

score 0 · Answer 3 · answered Nov 09 '17 at 04:52

La solución es muy fácil, basta con agregar la clase que ya te habían mencionado anteriormente class="center-block", esto lo que hace es centrar la imagen dentro de las columnas que asignaste de ancho a dicha imagen, por ejemplo si tu imagen está ocupando 6 columnas de ancho pero está muy ancha horizontalmente eso no se notará, si ocupas una imagen más pequeña sí te darás cuenta que la imagen se centra. Bueno regresando al problema principal, para mover la imagen hacia el centro utiliza class="col-md-offset-*" , esto recorrerá horizontalmente y a la derecha el número de columnas que asignes. Como tienes 6 columnas ocupadas, sobran otras 6 columnas, esas las divides entre dos, para tener tres columnas a la izquierda y tres a la derecha. Entonces en ese mismo div pones class="col-md-offset-3". Luego basta con poner todo tu codigo entre un <div class="row"></div> para asegurar que el contenido se mostrará en una sola fila, y el contenido no se mezcle con los demás elementos de tu código.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
 <div class="col-md-6 col-md-offset-3">
   <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BODcyODI4NDk3NV5BMl5BanBnXkFtZTgwNDkzODMzMzI@._CR1012,146,727,727_UX402_UY402._SY201_SX201_AL_.jpg" class="img-responsive center-block" alt="Imagen"/>
   <div class="h-30"></div>
 </div>
</div>
</div>

Pruébalo en tu proyecto, porque me parece que aquí no se ejecuta correctamente.

score 0 · Answer 4 · answered Nov 29 '17 at 13:28

Según la página de w3schools:

Add display:inline to the first image to force it to be centered (the .img-responsive class adds display:block to the image, which makes it jump to the left of the screen).

Es decir: cuando añades .img-responsive a una imagen, ésta se va a desplazar al margen izquierdo, céntrala añadiendo style="display:inline" a tu imagen, quedando así:

<div class="col-md-6 ">
  <img src="../img/012.jpg" class="img-responsive" style="display:inline" alt="titulo" />
  <div class="h-30"></div>
</div>

Antonio Enríquez Alvarado · Answer 5 · 2020-03-31T02:26:37.760

0

Yo lo conseguí con Flexbox. Realmente es funcional agregando las siguientes clases:

class="d-flex w-50 mr-auto ml-auto"

edited Mar 31 '20 at 02:26

answered Mar 31 '20 at 02:25

Antonio Enríquez Alvarado

11
3

score 0 · Answer 6 · answered May 25 '17 at 22:01

0

Agrega la clase center-block a tu imagen

<img src="../img/012.jpg" class="img-responsive center-block" alt="titulo"/>

answered May 25 '17 at 22:01

Héctor_gmp

366
2
10

Probado también y nada.... – May 26 '17 at 13:31
Si lo quieres al centro de la pagina cambia el `class` de tu div por `col-md-12` – Héctor_gmp May 26 '17 at 17:06
eso lo único que hace es ampliar el tamaño de la imagen, venía originalmente en 12 pero es demasiado grande y lo cambié al 6. – May 27 '17 at 10:08

score 0 · Answer 7 · answered May 26 '17 at 13:50

intenta con:

<div class="col-md-6 .img-responsive center-block">
  <img src="../img/012.jpg" class="img-responsive" alt="titulo"/>
  <div class="h-30"></div>
</div>

o tambien puedes intentar:

<div class="col-md-6 text-center">
  <img src="../img/012.jpg" class="img-responsive" alt="titulo"/>
  <div class="h-30"></div>
</div>

score 0 · Answer 8 · answered May 26 '17 at 22:20

Para centrar una imagen horizontalmente puedes especificarlo asi:

HTML:

<div class="col-md-6 ">
    <img src="../img/012.jpg" class="img-responsive" alt="titulo"/>
    <div class="h-30"></div>
</div>

CSS:

img.img-responsive {
    margin: auto
    display: block
}

score 0 · Answer 9 · answered May 27 '17 at 01:17

0

Has probado las propiedades de Flex box?

.elemento-padre {
 display: flex;
 width: 500px;
 height: 500px;
 justify-content: center;
 align-items: center;
 background: #666;
}

.elemento-hijo {
 display: flex;
 width: 100px;
 height: 100px;
 background: #999;
}

<!--Contenedor de la imagen-->
<div class="elemento-padre">
  
  <!--La imagen-->
  <img src="" class="elemento-hijo">

</div>

answered May 27 '17 at 01:17

Elizalde

1
3

Esto me ha funcionado...pero deja de ser responsive y es demasiado pequeña, y no consigo reducirla (he probado con width:50% y demás pero no se amplia) – May 27 '17 at 10:24
Flex está hecho para que sea 100% responsive. Solo debes saber asignarle correctamente las propiedades a la imagen. – Elizalde May 27 '17 at 18:45

Centrar una img-responsive bootstrap

9 Answers9

Linked