Foros del Web - centrar IMG en un DIV

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - centrar IMG en un DIV (http://www.forosdelweb.com/f53/centrar-img-div-435877/)

marce_str

19/10/2006 18:29

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ó.

Infected-FX

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

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

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

20/10/2006 08:55

el background-position tampoco funciona :-(
y no entendi lo del display:none, porque me desaparece todo

fer10

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 :arriba:

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/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

20/10/2006 09:30

Cita:

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

:-D

La zona horaria es GMT -6. Ahora son las 01:15.