Foros del web, para los que viven de bits

marce_str · 19-oct-2006, 18:29

Hola amigos!
quiero centrar una imagen tanto vertical como horizontal dentro de un div, sé hacerlo en el css, pero necesito que sea en el html porque tiene que ser una imagen dinámica.
Hasta ahora probe esto sin resultados, ojala alguien pueda decirme en qué me estoy equivocando.
Desde ya muchas gracias!

CSS:

Código:

.ad_banner {
	height:40px;
	width: 140px;
	margin: 0 6px;
	float:left;
}

.ad_banner img {
	margin: auto;
}

HTML:

Código:

<div class="ad_banner"><a href="#"><img src="images/ad_03.gif" alt="Publicidad"  /></a></div>

Tambien probe con hacer una clase "img.banner {margin: auto;}" pero tampoco funcionó.

Infected-FX · 19-oct-2006, 18:50

Solo ponle text-align:center; a tu clase brother

Código HTML:

.ad_banner {
	height:40px;
	width: 140px;
	margin: 0 6px;
	float:left;
        text-align:center;
}

marce_str · 19-oct-2006, 18:53

es que ya lo probé, habia hecho esto y no funcionó

.ad_banner {
height:40px;
width: 140px;
margin: 0 6px;
float:left;
text-align: center;
vertical-align: middle;
}

fer10 · 20-oct-2006, 08:43

ponla de background: background-position:50% 50% y listo..

y luego en seguida pones una pero con display:none para que se pueda visualisar sin estilos.. =)

marce_str · 20-oct-2006, 08:55

el background-position tampoco funciona

y no entendi lo del display:none, porque me desaparece todo

fer10 · 20-oct-2006, 09:20

yo use background position para un poryecto que tenia que centrar las imagenes.

creo que no me exlique bien necesitas poner el fondo y depues ponerle la posicion

te voy a dar un ejemplo:

Cita:

background:#fff url('direciondelaimagen.jpg') no-repeat 50% 50%;

y asi debe de funcionar

lo del display none es para que se pueda ver la imagen cuando quiten los estilos, pero eso ponlo depues de que te funcione..

ejemplo:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<head>
<title>Untitled</title>
<style>
div{
border:1px solid #000;
background:#fff url('http://www.google.com/images/logo_sm.gif') no-repeat 50% 50%;
width:400px;
height:400px;
}
</style>
</head>

<body>

<div></div>

</body>
</html>

agranda el width y height y observa como se centra..

marce_str · 20-oct-2006, 09:24

ahh... eso si, ya lo sabia, pero fijate que yo explicaba que no tiene que ir la imagen en el estilo. Porque es una imagen dinámica que va a ir cambiando con php o sea que la tengo que poner en el html

Código:

<div class="ad_banner"><a href="#"><img src="images/ad_03.gif" alt="Publicidad"  /></a></div>

bueno, esto no es php, pero es solo una prueba

fer10 · 20-oct-2006, 09:30

Cita:

se la agregas directamente y los otros parametros se los dejas en la hoja de estilos..

19-oct-2006, 18:29	#1 (permalink)
marce_str Fecha de Ingreso: septiembre-2006 Ubicación: La Plata, Argentina Mensajes: 177	centrar IMG en un DIV Hola amigos! quiero centrar una imagen tanto vertical como horizontal dentro de un div, sé hacerlo en el css, pero necesito que sea en el html porque tiene que ser una imagen dinámica. Hasta ahora probe esto sin resultados, ojala alguien pueda decirme en qué me estoy equivocando. Desde ya muchas gracias! CSS: Código: .ad_banner { height:40px; width: 140px; margin: 0 6px; float:left; } .ad_banner img { margin: auto; } HTML: Código: <div class="ad_banner"><a href="#"><img src="images/ad_03.gif" alt="Publicidad" /></a></div> Tambien probe con hacer una clase "img.banner {margin: auto;}" pero tampoco funcionó.

19-oct-2006, 18:50	#2 (permalink)
Infected-FX Fecha de Ingreso: octubre-2006 Mensajes: 4	Solo ponle text-align:center; a tu clase brother Código HTML: .ad_banner { height:40px; width: 140px; margin: 0 6px; float:left; text-align:center; }

20-oct-2006, 08:43	#4 (permalink)
fer10 Fecha de Ingreso: octubre-2005 Ubicación: Guadalajara - Mexico Mensajes: 902	ponla de background: background-position:50% 50% y listo.. y luego en seguida pones una pero con display:none para que se pueda visualisar sin estilos.. =) __________________ Saludos FT. www.fernando.com.mx

20-oct-2006, 09:20	#6 (permalink)
fer10 Fecha de Ingreso: octubre-2005 Ubicación: Guadalajara - Mexico Mensajes: 902	yo use background position para un poryecto que tenia que centrar las imagenes. creo que no me exlique bien necesitas poner el fondo y depues ponerle la posicion te voy a dar un ejemplo: Cita: background:#fff url('direciondelaimagen.jpg') no-repeat 50% 50%; y asi debe de funcionar lo del display none es para que se pueda ver la imagen cuando quiten los estilos, pero eso ponlo depues de que te funcione.. ejemplo: Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Untitled</title> <style> div{ border:1px solid #000; background:#fff url('http://www.google.com/images/logo_sm.gif') no-repeat 50% 50%; width:400px; height:400px; } </style> </head> <body> <div></div> </body> </html> agranda el width y height y observa como se centra.. __________________ Saludos FT. www.fernando.com.mx Última edición por fer10; 20-oct-2006 a las 09:27.

20-oct-2006, 09:24	#7 (permalink)
marce_str Fecha de Ingreso: septiembre-2006 Ubicación: La Plata, Argentina Mensajes: 177	ahh... eso si, ya lo sabia, pero fijate que yo explicaba que no tiene que ir la imagen en el estilo. Porque es una imagen dinámica que va a ir cambiando con php o sea que la tengo que poner en el html Código: <div class="ad_banner"><a href="#"><img src="images/ad_03.gif" alt="Publicidad" /></a></div> bueno, esto no es php, pero es solo una prueba

19-oct-2006, 18:53	#3 (permalink)
marce_str Fecha de Ingreso: septiembre-2006 Ubicación: La Plata, Argentina Mensajes: 177	es que ya lo probé, habia hecho esto y no funcionó .ad_banner { height:40px; width: 140px; margin: 0 6px; float:left; text-align: center; vertical-align: middle; }

20-oct-2006, 08:55	#5 (permalink)
marce_str Fecha de Ingreso: septiembre-2006 Ubicación: La Plata, Argentina Mensajes: 177	el background-position tampoco funciona y no entendi lo del display:none, porque me desaparece todo

20-oct-2006, 09:30	#8 (permalink)
fer10 Fecha de Ingreso: octubre-2005 Ubicación: Guadalajara - Mexico Mensajes: 902	Cita: <a href="#" style="background-image:url('images/ad_03.gif')"></a> se la agregas directamente y los otros parametros se los dejas en la hoja de estilos.. __________________ Saludos FT. www.fernando.com.mx

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado