Como centrar imagen html ?
Esto me lo han preguntado muchas veces: como hacer para centrar una imagen en vertical y horizontal ? (sin tablas)
Aquí te enseño una técnica infalible para centrar imágenes en los 2 sentidos.
Como centrar imagen HTML
El centrado de imágenes en el eje horizontal es un tanto mas sencillo, simplemente basta con agregar un margen automático a la izquierda y a la derecha.
Pero veamos un ejemplo mas complejo de como centrar imagen html, en en ambos ejes.
Voy a crear un documento HTML con una imagen simple de 580px de ancho por 390px de alto.
Para ello creo primero un documento simple en XHTML o HTML5 (aquí el ejemplo es en XHTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Centrado de imagen - psdahtmlpasoapaso.com</title> </head> <body> </body> </html>
Luego agrego dentro del BODY una etiqueta IMG correspondiente a una imagen llamada “foto.jpg” con su ancho y su alto:
<img src="foto.jpg" width="580" height="390" />
Y luego trabajamos sobre los estilos CSS dentro del mismo documento.
Para ellos vamos a utilizar el selector de la etiqueta IMG directamente y le vamos a aplicar algunas propiedades.
Primero entonces especificamos su alto y su ancho:
img {
width: 580px;
height: 390px;
}
Luego añadimos márgenes superior e izquierdo, con valores negativos que corresponden a la mitad exacta del alto y ancho de la imagen.
Es decir, el margen izquierdo debe ser la mitad del ancho, y el margen superior debe ser la mitad del algo. Siempre usando valores negativos.
Entonces agregamos los márgenes:
img {
width: 580px;
height: 390px;
margin-top: -195px;
margin-left: -290px;
}
Luego debemos posicionar la imagen con valores de 50%.
Para eso usamos la propiedades LEFT y TOP con un valor igual a 50%:
img {
width: 580px;
height: 390px;
margin-top: -195px;
margin-left: -290px;
left: 50%;
top: 50%;
}
Y por ultimo debemos especificar el tipo de posicionamiento del elemento imagen, con un valor absoluto, es decir, que coloque a este elemento por fuera del flujo normal de elementos HTML.
img {
width: 580px;
height: 390px;
margin-top: -195px;
margin-left: -290px;
left: 50%;
top: 50%;
position: absolute;
}
Código completo para centrar imagen html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrado de imagen - psdahtmlpasoapaso.com</title>
<style type="text/css">
img {
width: 580px;
height: 390px;
margin-top: -195px;
margin-left: -290px;
left: 50%;
top: 50%;
position: absolute;
}
</style>
</head>
<body>
<img src="foto.jpg" width="580" height="390" />
</body>
</html>
De esta forma podemos perfectamente centrar imagen html, de forma vertical y horizontal.
Puedes ver y descargar el código de este artículo aquí:
Si quieres aprender mucho mas sobre técnicas de CSS y HTML, te recomiendo el video-curso completo llamado “PSD a HTML Paso a Paso”:
Saludos!
Cristian
Gracias me sirve de 10
Muchas gracias, me ayudo mucho ♥
Excelente! me sirvio mucho, te agradezco. Saludos!
MUCHAS GRACIAS:
me sirvio de mucho, nuevamente gracias por tu generosidad de compartir tus conocimientos
SALUDOS
MARIO
Excelente! de todas las opciones que se pueden realizar para centrar una imagen horizontal, y verticalemte:
img{
position: absolute;
margin-top: -(la mitad de los pixeles verticales de la imagen)px;
margin-left: -(la mitad de los pixeles horizontales de la imagen)px;
left: 50%;
top: 50%;
}
esta es la de mas facil aplicacion!. Gracias.