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.
style="margin: 0 auto"
en la imagen, lo probaste?