Foros del Web » Creando para Internet » CSS »

centrar IMG en un DIV

Estas en el tema de centrar IMG en un DIV en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/10/2006, 19:29
Avatar de marce_str  
Fecha de Ingreso: septiembre-2006
Ubicación: La Plata, Argentina
Mensajes: 203
Antigüedad: 11 años, 2 meses
Puntos: 1
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ó.
  #2 (permalink)  
Antiguo 19/10/2006, 19:50
 
Fecha de Ingreso: octubre-2006
Mensajes: 4
Antigüedad: 11 años, 1 mes
Puntos: 0
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;
}
  #3 (permalink)  
Antiguo 19/10/2006, 19:53
Avatar de marce_str  
Fecha de Ingreso: septiembre-2006
Ubicación: La Plata, Argentina
Mensajes: 203
Antigüedad: 11 años, 2 meses
Puntos: 1
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;
}
  #4 (permalink)  
Antiguo 20/10/2006, 09:43
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
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
  #5 (permalink)  
Antiguo 20/10/2006, 09:55
Avatar de marce_str  
Fecha de Ingreso: septiembre-2006
Ubicación: La Plata, Argentina
Mensajes: 203
Antigüedad: 11 años, 2 meses
Puntos: 1
el background-position tampoco funciona
y no entendi lo del display:none, porque me desaparece todo
  #6 (permalink)  
Antiguo 20/10/2006, 10:20
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
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/10/2006 a las 10:27
  #7 (permalink)  
Antiguo 20/10/2006, 10:24
Avatar de marce_str  
Fecha de Ingreso: septiembre-2006
Ubicación: La Plata, Argentina
Mensajes: 203
Antigüedad: 11 años, 2 meses
Puntos: 1
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
  #8 (permalink)  
Antiguo 20/10/2006, 10:30
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:57.