centrar IMG en un DIV

marce_str · #1 (**permalink**) 19/10/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 · #2 (**permalink**) 19/10/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 · #3 (**permalink**) 19/10/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 · #4 (**permalink**) 20/10/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 · #5 (**permalink**) 20/10/2006, 08:55

el background-position tampoco funciona

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

fer10 · #6 (**permalink**) 20/10/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 · #7 (**permalink**) 20/10/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 · #8 (**permalink**) 20/10/2006, 09:30

Cita:

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