Como Centrar Imagen HTML

Como centrar imagen html (vertical y
horizontal)
1 respuesta
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/xht
<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;
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;
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/xht
<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;
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.

Como Centrar Imagen HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Como Centrar Imagen HTML

Загружено:

Авторское право:

Доступные форматы

Como centrar imagen html (vertical y

Como centrar imagen html ?

Como centrar imagen HTML

Primero entonces especificamos su alto y su ancho:

Entonces agregamos los márgenes:

Luego debemos posicionar la imagen con valores de 50%.

Código completo para centrar imagen html:

Вам также может понравиться