Foros del Web » Creando para Internet » CSS »

Centrar imagenes en div

 Estas en el tema de Centrar imagenes en div en el foro de CSS en Foros del Web. Hola! necesito centrar horizontalmente 3 imagenes en un div, o sea que queden las 3 una al lado de la otra centradas horizontalmente. A este ...
  #1 (permalink)  
Antiguo 03/09/2008, 09:31
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 21 años, 5 meses
Puntos: 0
Centrar imagenes en div
Hola! necesito centrar horizontalmente 3 imagenes en un div, o sea que queden las 3 una al lado de la otra centradas horizontalmente.

A este div le coloque "text-align: center;"

pero solo se ve bien en explorer6, no logro centrarlas en firefox y explorer7, pobre con distintas opciones como float pero nada


Alguien sabe como deberia hacerlo?


gracias!
__________________
www.elumina.com.ar
  #2 (permalink)  
Antiguo 03/09/2008, 09:34
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Respuesta: Centrar imagenes en div
probá poniendole a tu DIV margin:0 auto;
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 03/09/2008, 09:52
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 21 años, 5 meses
Puntos: 0
Respuesta: Centrar imagenes en div
No me funcionó

les paso el codigo,

html:
<div class="cuerpob">
<a href="iruya_05.php"><img src="imagenes/anterior.gif" alt="anterior" border="0" /></a>
<img src="imagenes/IR06CaminoaIruya6b.jpg" />
<a href="iruya_07.php"><img src="imagenes/siguiente.gif" alt="siguiente" border="0" /></a>
</div>


css:
.cuerpob {
width: 1000px;
height: 480px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
__________________
www.elumina.com.ar
  #4 (permalink)  
Antiguo 03/09/2008, 09:55
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Respuesta: Centrar imagenes en div
html:
<div class="cuerpob">
<a href="iruya_05.php"><img src="imagenes/anterior.gif" alt="anterior" border="0" /></a>
<img src="imagenes/IR06CaminoaIruya6b.jpg" />
<a href="iruya_07.php"><img src="imagenes/siguiente.gif" alt="siguiente" border="0" /></a>
</div>


css:
.cuerpob {
width: 1000px;
height: 480px;
text-align: center;
margin:0 auto;
}
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #5 (permalink)  
Antiguo 03/09/2008, 10:04
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 21 años, 5 meses
Puntos: 0
Respuesta: Centrar imagenes en div
Lo probe y nada, mira ahi te paso la url :

http://www.fotodepaisaje.com.ar/iruya_06.php

asi se ve, en ie6 se ve bien, en los demas no

gracias!!
__________________
www.elumina.com.ar
  #6 (permalink)  
Antiguo 03/09/2008, 11:04
Avatar de poison_mayer  
Fecha de Ingreso: julio-2008
Mensajes: 69
Antigüedad: 15 años, 9 meses
Puntos: 2
Respuesta: Centrar imagenes en div
el problema no esta en la clase cuerpob sino en cuerpoesp quitale el float: left;
  #7 (permalink)  
Antiguo 03/09/2008, 11:21
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 21 años, 5 meses
Puntos: 0
Respuesta: Centrar imagenes en div
Ok! gracias era eso, ahora porque influye si es otro div aparte?

saludos y gracias a los que respondieron
__________________
www.elumina.com.ar
  #8 (permalink)  
Antiguo 03/09/2008, 11:47
 
Fecha de Ingreso: septiembre-2008
Mensajes: 8
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Centrar imagenes en div
hola yo estoy haciendo una pagina.. la hice me quedo toda linda.. pero cuando se ve en distintos monitores me aparece toda a la derecha y no se como modificarla ...
la pagina esta en .
www.smartsailing.com.ar/vapweb
alguin se le ocurre viendo el source como modificarla para que me aparesca bien en todas las resoluciones?
muchas gracias
  #9 (permalink)  
Antiguo 03/09/2008, 11:59
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 21 años, 5 meses
Puntos: 0
Respuesta: Centrar imagenes en div
Cita:
Iniciado por efit Ver Mensaje
hola yo estoy haciendo una pagina.. la hice me quedo toda linda.. pero cuando se ve en distintos monitores me aparece toda a la derecha y no se como modificarla ...
la pagina esta en .
www.smartsailing.com.ar/vapweb
alguin se le ocurre viendo el source como modificarla para que me aparesca bien en todas las resoluciones?
muchas gracias
Creo q es el "position:absolute;"
a tu div contenedor ponle:

.contenedor {
margin-left: auto;
margin-right: auto;
}

y a todo lo que quieras que se vea centrado horizontalmente en el navegador

saludos
__________________
www.elumina.com.ar
  #10 (permalink)  
Antiguo 03/09/2008, 12:26
 
Fecha de Ingreso: septiembre-2008
Mensajes: 8
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Centrar imagenes en div
guille te puedo pasar un telefono o un email para comunicarnos mejor?
porque no entiendo mucho como hacerlo..
mi msn es fetu29 en hotmail punto com
  #11 (permalink)  
Antiguo 03/09/2008, 12:29
 
Fecha de Ingreso: septiembre-2008
Mensajes: 8
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Centrar imagenes en div
mira aca tengo el codigo de mi pagina y no encuentro ninguno que diga lo que decis para modificar... en cual seria.. mil gracias!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VAP - Home </title>
<style type="text/css">
<!--
body {
margin-top: 50px;
background-color: #6f6878;
background-image: url(images/fondosss%20.jpg);
margin-bottom: 50px;
}
.Estilo1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#apDiv1 {
position:absolute;
left:891px;
top:55px;
width:47px;
height:18px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:697px;
top:7px;
width:161px;
height:16px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:-93px;
top:194px;
width:679px;
height:19px;
z-index:49;
}
#apDiv4 {
position:absolute;
left:135px;
top:81px;
width:218px;
height:19px;
z-index:3;
}
#apDiv5 {
position:absolute;
left:626px;
top:221px;
width:387px;
height:221px;
z-index:4;
}
.Estilo8 {
color: #999999;
font-size: 24px;
}
.Estilo15 {color: #FFFFFF}
#apDiv8 {
position:absolute;
left:-13px;
top:154px;
width:246px;
height:235px;
z-index:6;
}
#apDiv6 {
position:absolute;
left:201px;
top:11px;
width:804px;
height:1486px;
z-index:1;
  #12 (permalink)  
Antiguo 03/09/2008, 12:30
 
Fecha de Ingreso: septiembre-2008
Mensajes: 8
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Centrar imagenes en div
y sigue aca

}
.Estilo25 {
font-size: 10px;
color: #333333;
}
#apDiv {
position:absolute;
left:724px;
top:1099px;
width:179px;
height:46px;
z-index:52;
}
#apDiv7 {
position:absolute;
left:180px;
top:106px;
width:189px;
height:71px;
z-index:1;
}
#apDiv9 {
position:absolute;
left:796px;
top:392px;
width:181px;
height:87px;
z-index:2;
}
#apDiv10 {
position:absolute;
left:372px;
top:263px;
width:193px;
height:88px;
z-index:3;
}
.Estilo26 {font-size: 10px; color: #999999;}
#apDiv11 {
position:absolute;
left:260px;
top:165px;
width:680px;
height:1293px;
z-index:2;
}
#apDiv12 {
position:absolute;
left:538px;
top:70px;
width:445px;
height:36px;
z-index:3;
}
#apDiv13 {
position:absolute;
left:261px;
top:128px;
width:500px;
height:68px;
z-index:4;
}
#apDiv14 {
position:absolute;
left:555px;
top:130px;
width:389px;
height:49px;
z-index:5;
}
#apDiv15 {
position:absolute;
left:826px;
top:18px;
width:344px;
height:32px;
z-index:6;
}
.Estilo21 {
color: #0d0d21;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.Estilo22 {
color: #212121;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#foto1 {
position:absolute;
left:263px;
top:265px;
width:198px;
height:214px;
z-index:7;
}
#foto2 {
position:absolute;
left:16px;
top:299px;
width:198px;
height:214px;
z-index:8;
}
#foto3 {
position:absolute;
left:263px;
top:265px;
width:200px;
height:214px;
z-index:9;
}
#apDiv16 {
position:absolute;
left:301px;
top:523px;
width:126px;
height:49px;
z-index:10;
}
a:link {
color: #999999;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: none;
color: #999999;
}
body,td,th {
color: #999999;
}
.Estilo50 {font-size: 11px; color: #666666; }
.Estilo51 {font-size: 11px}
.Estilo52 {color: #666666}
#apDiv17 {
position:absolute;
left:583px;
top:142px;
width:570px;
height:77px;
z-index:10;
}
.Estilo53 {
font-size: 16px;
color: #888888;
}
#apDiv23 {
position:absolute;
left:764px;
top:147px;
width:185px;
height:30px;
z-index:12;
}
.Estilo54 {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.Estilo59 {color: #000000}
#apDiv18 {
position:absolute;
left:487px;
top:252px;
width:439px;
height:28px;
z-index:13;
}
.Estilo67 {color: #000039; font-size: 13px; }
.Estilo68 {font-size: 13px}
.Estilo69 {color: #000000; font-size: 13px; }
.Estilo70 {font-size: 16px}
#apDiv19 {
position:absolute;
left:514px;
top:1099px;
width:179px;
height:46px;
z-index:14;
}
#apDiv20 { position:absolute;
left:514px;
top:1099px;
width:179px;
height:46px;
z-index:14;
}
#apDiv21 {
position:absolute;
left:264px;
top:431px;
width:350px;
height:178px;
z-index:53;
}
#apDiv22 {
position:absolute;
left:260px;
top:485px;
width:78px;
height:15px;
z-index:54;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/prod 4 Ce.jpg','images/prod 3 Ce.jpg')">
<div id="apDiv6">
<div align="center"></div>
<table width="682" height="1468" border="2" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" bgcolor="#000000"><div align="right">
<table width="682" height="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="681" height="110" valign="top" bgcolor="#000039"><div align="left">
<p><strong><img src="images/logovapcolormalu.jpg" width="83" height="76" /><span class="Estilo8">VAP &amp; Asociados</span></strong></p>
</div>
<p align="right" class="Estilo1">&nbsp;</p></td>
</tr>
</table>
</div>
<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<hr align="center" />
<div align="center"><span class="Estilo15"><strong><span class="Estilo25">VAP &amp; Asociados: </span></strong><span class="Estilo25">San Martín 140 Piso 15° - (C1004AAD) - Ciudad de Buenos Aires - Argentina <br />
Tel: (5411) 5235-9060 / 5235-9072 - Fax: 4345-1729 / [email protected]</span></span>
<div class="Estilo53" id="apDiv4">Economic and Financial Bureau</div>
<span class="Estilo15"><span class="Estilo25"><br />
-Todos los derechos reservados-</span></span> </div></td>
</tr>
</table>
<p>&nbsp;</p>
</div>
<div id="apDiv11">
<table width="683" height="1241" border="10" cellpadding="0" cellspacing="0" bordercolor="dedede">
<tr>
<td width="213" height="1241" bgcolor="dedede"><div style="position: absolute; left 0%; top: -66px; height: 189px; widht:100px; padding: 1em;" id="apDiv8" position:="position:" absolute="absolute">
<table width="146" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="146" height="50" valign="top">&nbsp;</td>
<td width="146"><span class="Estilo15">..</span></td>
</tr>
<tr>
<td height="50"><img src="images/prod 4 Ce.jpg" alt="" width="200" height="50" /></td>
<td><a href="esp.pro1.html"></a></td>
</tr>
<tr>
<td height="50"><a href="esp.pro2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','images/prod 3 Ce.jpg',1)"><img src="images/prod 3 se.jpg" name="Image24" width="200" height="50" border="0" id="Image24" onmouseover="MM_showHideLayers('foto1','','hide',' foto2','','hide','foto3','','show')" onmouseout="MM_showHideLayers('foto1','','show','f oto2','','hide','foto3','','hide')" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','images/prod 4 Ce.jpg',1)"></a></td>
<td><a href="esp.pro2.html"></a></td>
</tr>
<tr>
<td height="50">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
<td width="14" bgcolor="dedede">&nbsp;</td>
<td width="456" valign="top" bgcolor="dedede"><p align="center">&nbsp;</p>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="Estilo54"><p><strong><span class="Estilo70">FONDOS DE FAMILIA Y ADMINISTRACIÓN PATRIMONIAL</span></strong></p>
<p>&nbsp;</p>
<p><span class="Estilo68"><strong>VAP &amp; Asociados</strong> asesora en la implementación de diversas estrategias de inversión directa a riesgo empresario: </span></p></td>
</tr>
<tr>
<td class="Estilo54"> </td>
</tr>
<tr>
<td class="Estilo54"><table width="100%" border="0">
<tbody>
<tr>
  #13 (permalink)  
Antiguo 03/09/2008, 12:31
 
Fecha de Ingreso: septiembre-2008
Mensajes: 8
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Centrar imagenes en div
y despues sigue pero no se si vale la pena uqe lo siga posteando
gracias
  #14 (permalink)  
Antiguo 04/09/2008, 09:32
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 21 años, 5 meses
Puntos: 0
Respuesta: Centrar imagenes en div
Por lo que veo tu div contenedor es "apDiv6"

que tiene los siguiente:

#apDiv6 {
position:absolute;
left:201px;
top:11px;
width:804px;
height:1486px;
z-index:1;

sacale el

position:absolute;
left:201px;

y ponle:
margin-left: auto;
margin-right: auto;

proba con eso a ver si cambia algo, igual por lo que vi el codigo y el css no es muy prolijo.

saludos!
__________________
www.elumina.com.ar
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:09.