5

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.

5
  • en el video usa style="margin: 0 auto" en la imagen, lo probaste? Commented el 25 may. 2017 a las 21:54
  • Si, como ya dije ya probé con eso y nada :S
    – user44811
    Commented el 25 may. 2017 a las 21:57
  • Intenta reproducir el código que tienes actualmente en esta página: 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. Commented el 26 may. 2017 a las 15:58
  • ¿lo quieres centrar en el div o en el centro del navegador?
    – Rene Limon
    Commented el 26 may. 2017 a las 22:29
  • 2
    @S0NIC22 no agregues la respuesta en tu pregunta, en cambio deberías publicar como respuesta
    – Mariano
    Commented el 28 may. 2017 a las 0:26

9 respuestas 9

4

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.

1
  • 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 Cómo responder Commented el 9 may. 2018 a las 19:31
3

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í.

2
  • He probado ambos y nada, imposible...
    – user44811
    Commented el 26 may. 2017 a las 13:31
  • @S0NIC22 ¿Podrías poner el código que tienes actualmente? Commented el 26 may. 2017 a las 13:33
0

Agrega la clase center-block a tu imagen

<img src="../img/012.jpg" class="img-responsive center-block" alt="titulo"/>
3
  • Probado también y nada....
    – user44811
    Commented el 26 may. 2017 a las 13:31
  • Si lo quieres al centro de la pagina cambia el class de tu div por col-md-12 Commented el 26 may. 2017 a las 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.
    – user44811
    Commented el 27 may. 2017 a las 10:08
0

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>
0

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
}
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>

2
  • 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)
    – user44811
    Commented el 27 may. 2017 a las 10:24
  • Flex está hecho para que sea 100% responsive. Solo debes saber asignarle correctamente las propiedades a la imagen.
    – Elizalde
    Commented el 27 may. 2017 a las 18:45
0

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.

0

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>
0

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

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.