Centrar imagen vertical y horizontalmente con CSS
En este artículo vas a descubrir una forma rápida y sencilla de centrar una imagen o contenido tanto vertical como horizontalmente dentro de un contenedor padre o div utilizando únicamente reglas de estilo CSS.
Aparentemente, parece una tarea sencilla pero tiene un poco más de complejidad de lo que parece.
Buscando soluciones en Internet se encuentran muchas divagaciones y ejemplos interminables que no acaban de satisfacer esta sencilla necesidad en todos los navegadores.
Por ese motivo, me he sentado a escribir para facilitarte un poco la vida ofreciéndote una rápida y efectiva solución.
La primera idea es usar el atributo «vertical-align», pero esta solución sólo es válida para alinear la imagen con el texto adyacente.
Si definimos el atributo «line-height» para el contenedor padre igual a su altura, centramos el contenido horizontalmente con text-align:center; y, finalmente, centramos la imagen verticalmente, ya tendríamos una solución sencilla y aceptable.
A nivel técnico, en la hoja de estilos CSS agrega algo como lo siguiente:
.content {
width:600px;
height:400px;
line-height:400px;
margin:0px auto;
text-align:center;
background-color:#CCCCCC;
}
.content img {
vertical-align:middle;
}
Y en el cuerpo de la página o más bien dentro de la etiqueta <body> agrega el siguiente código HTML con contiene la imagen a centrar:
Y ya lo tienes! Consigues un resultado como la siguiente imagen:
Buen aporte, pero también se podría haber realizado con flex.
Hola,
Efectivamente. Con flex es más sencillo. Lo recomiendo.
Saludos
necesito que las imagenes del blog sean verticales todas, como lo logro?
hola! estoy creando mi pagina web para colocar mis Beat tapes, discos y todo eso, pero tengo un problema y es que no logro cuadrar las imagenes, la idea es que queden todas en «la misma linea» les dejo una imagen de lo que sucede y espero me puedan ayudar.
https://mega.nz/#!RYFVzTyS!BgBRC34w7eYMXeJIFMn52oK3C2Cnr3dHPdrxNuBZU3E
Hola buenas tardes,
Las imágenes deben tener un tamaño proporcional al tamaño establecido en la configuración de imágenes de tu tienda PrestaShop.
Saludos
Este vídeo me sirvió para centrar el logo, hay masen el canal depronto les sirven.
https://www.youtube.com/channel/UCR93GcZvHiC8zrCnSfbE5vw
Funciona perfectamente…. muy bien explicado
Saludos
Tambien puedes usar la propiedad transform. Mira aca:
http://www.cleverclouds.im/public/node/post-2015-01-transform-vertical-align
Excelente truco, siempre estuve buscando algo así, peor mejor aún, hice un mixin en less que me ayuda a implementar mejor y más fácilmente este trugo, gracias :3
Hola, estoy montando una tienda con prestashop, estoy leyendo tu articulo pero no entiendo en que archivo css deberia incorporarlo, products.css , products_list.css ??
te agradeceria si me lo pudieras indicar, la idea es que quede tanto texto como imagen centrado en cada celda, igual que http://www.parafarmaciamimaos.com/clon/
un millon de gracias anticipadas, y feliz año 2014
Dependiendo para que página del prestashop lo vayas a emplear deberás utilizar una hoja de estilos u otra.
En el caso de que lo quieras para varios casos, puedes usar el global.css
Hola, este video me sirvio bastante para centrar logo en el mismo canal tambien explican como centrar el top menu.
https://youtu.be/oYI_eJ2U2Kk