Foros del Web » Creando para Internet » CSS »

Centrar imagenes horizontalmente

Estas en el tema de Centrar imagenes horizontalmente en el foro de CSS en Foros del Web. Holas, Estoy hace rato buscando esto, pero no lo encuentro. Lo que necesito es centrar imagenes, que queden una alado de la otra, ya que ...
  #1 (permalink)  
Antiguo 24/10/2009, 22:15
Avatar de murderer  
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 8 años, 8 meses
Puntos: 2
Sonrisa Centrar imagenes horizontalmente

Holas,

Estoy hace rato buscando esto, pero no lo encuentro. Lo que necesito es centrar imagenes, que queden una alado de la otra, ya que por defecto se ordenan verticalmente. Probé usando la tecnica del menu, de poner los ul y li con block, pero no resulto

Desde ya muchas gracias,

Saludos!
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter
  #2 (permalink)  
Antiguo 24/10/2009, 23:11
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar imagenes horizontalmente

"Centrar imagenes horizontalmente"????
o
"que queden una alado de la otra"

hasta donde se las imagenes se ponen por defecto una junto a otra y no vertical...
si te refieres a "display:block;" no es que "no funcione" al contrario es correcto.
no tengo idea de lo que quieres y mucho menos de tu codigo HTML/CSS
pero si dices que trataste con display:block; entonces trata mejor con "display:inline" para mostrarlos en linea
  #3 (permalink)  
Antiguo 25/10/2009, 14:05
Avatar de murderer  
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 8 años, 8 meses
Puntos: 2
Respuesta: Centrar imagenes horizontalmente

Jaja, tienes razón quise decir alinear imagenes horizontalmente.

Lo que quiero hacer es crear una galeria de imagenes, que vaya acomodando las imagenes horizontalmente, y que luego de 5 imagenes baje a la siguiente fila, para seguir insertando imagenes.


Este es el código
Código:
/* General */

body {
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000033;
font-size:12px;
}

body a {
color:#b28626;
text-decoration:none;
}

body a:hover {
color:#003366;
text-decoration:none;
}

body img {
border:none;
}




#cuerpo {
overflow:auto;
background:#0099CC;
width:900px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

/*---------------*/
/* Encabezado */

#header {
width:900px;
height:200px;
}

#notice a{
color:#FFFFFF;
}
#notice a:hover{
color:#FFFFFF;
text-decoration:underline;
}

#cpuser a{
color:#FFFFFF;
}
#cpuser a:hover{
color:#FFFFFF;
text-decoration:underline;
}


#nombre {
margin:20px;
width:450px;
height:120px;
float:left;
}


#login {
text-align:center;
background:url(img/log_bg.png);
width:350px;
height:150px;
margin:20px;
float:right;
}

#login input{
background:#FFFFCC;
border:none;
}
/*---------------*/
/* Contenedor principal*/

#contenedorprincipal {
margin:15px;
}

#notice {
width:870px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

/* Secondary boxes */
#perfilfoto {
width:180px;
height:240px;
margin:15px;
text-align:center;
}

#perfilfotoheaderleft {
background:url(img/left_header_box.png) no-repeat;
width:20px;
height:30px;
overflow:auto;
float:left;
}

#perfilfotoheader {
background:url(img/header_box.png) repeat-x;
width:140px;
height:30px;
overflow:auto;
}

#perfilfotoheaderright {
background:url(img/right_header_box.png) no-repeat;
width:20px;
height:30px;
overflow:auto;
float:right;
position:static;
}

#perfilfotocenter {
background:#FFFFFF;
width:180px;
height:200px;
overflow:auto;
}

#perfilfotofooter {
background:url(img/footer_fperfil.png) repeat-x;
width:180px;
height:10px;
overflow:auto;
}
/* Galeria de fotos en el perfil */

#perfilgalfoto {
width:680px;
height:240px;
margin:15px;
text-align:center;
display: block;
}

#perfilgalfoto ul, li {
	list-style-type: none;
	display: inline;
}


#perfilgalfotoheaderleft {
background:url(img/left_header_box.png) no-repeat;
width:20px;
height:30px;
overflow:auto;
float:left;
}

#perfilgalfotoheader {
background:url(img/header_box.png) repeat-x;
width:640px;
height:30px;
overflow:auto;
}
#perfilgalfotoheaderright {
background:url(img/right_header_box.png) no-repeat;
width:20px;
height:30px;
overflow:auto;
float:right;
position:static;
}

#perfilgalfotocenter {
background:#FFFFFF;
width:680px;
height:230px;
overflow:auto;
}

#perfilgalfotofooter {
background:url(img/footer_fperfil.png) repeat-x;
width:680px;
height:10px;
overflow:auto;
}



/*---------------*/
/* Footer*/


#footer {
overflow:auto;
background:url(img/cuerpo_bottom.png) no-repeat;
height:50px;
margin-left:auto;
margin-right:auto;
width:900px;
text-align:center;
}
Y el HTML es:
Código:
   <div id="perfilgalfoto">
    <div id="perfilgalfotoheaderleft"></div>
    <div id="perfilgalfotoheaderright"></div>
    <div id="perfilgalfotoheader">
     <p>  Galeria de imagenes </p>
    </div>
    
    <div id="perfilgalfotocenter">
     <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
     <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
    </div>
    </div>
   <div id="perfilgalfotofooter">
     <p>&nbsp;</p>
   </div>
Muchas gracias!

Saludos!
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter
  #4 (permalink)  
Antiguo 25/10/2009, 15:14
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar imagenes horizontalmente

bueno... se me ocurre...
Código css:
Ver original
  1. #perfilgalfotoheader {
  2. background:url(img/header_box.png) repeat-x;
  3. width:640px;
  4. height:30px;
  5. /*overflow:auto;*/
  6. }
  7.  
  8. #perfilgalfotocenter {
  9. background:#FFFFFF;
  10. /*width:680px;*/
  11. width:800px;
  12. /*height:230px;
  13. overflow:auto;*/
  14. }
  15.  
  16. .foto{ width:160px; float:left;}

Código html:
Ver original
  1. <div id="perfilgalfoto">
  2.     <div id="perfilgalfotoheaderleft"></div>
  3.     <div id="perfilgalfotoheaderright"></div>
  4.     <div id="perfilgalfotoheader">
  5.         <p>Galeria de imagenes</p>
  6.     </div>    
  7.     <div id="perfilgalfotocenter">
  8.         <div class="foto">
  9.             <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
  10.             <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
  11.         </div>
  12.         <div class="foto">
  13.             <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
  14.             <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
  15.         </div>
  16.         <div class="foto">
  17.             <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
  18.             <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
  19.         </div>
  20.         <div class="foto">
  21.             <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
  22.             <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
  23.         </div>
  24.         <div class="foto">
  25.             <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
  26.             <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
  27.         </div>
  28.         <div class="foto">
  29.             <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
  30.             <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
  31.         </div>
  32.         <div class="foto">
  33.             <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
  34.             <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
  35.         </div>
  36.     </div>
  37. </div>
  38. <div id="perfilgalfotofooter">
  39. </div>

basta con encerrar a la foto+descripcion en un solo div... darle un ancho y flotarlo a la izquierda... y el resto flotara... hasta que llege al limite del ancho del div padre y se colapsa solito... asi que si du div tiene 160px de ancho cuando llege a 800px (160*5) del div padre se colapsa chao y suerte!...
  #5 (permalink)  
Antiguo 25/10/2009, 16:21
Avatar de murderer  
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 8 años, 8 meses
Puntos: 2
Respuesta: Centrar imagenes horizontalmente

No me anduvo el código, pero además me descentro todo la box donde estaba (por suerte copie los archivos). Creo que cuando saque "overflow:auto;" cambio todo.


Saludos!
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter
  #6 (permalink)  
Antiguo 25/10/2009, 17:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar imagenes horizontalmente

Cita:
Lo que quiero hacer es crear una galeria de imagenes, que vaya acomodando las imagenes horizontalmente, y que luego de 5 imagenes baje a la siguiente fila, para seguir insertando imagenes.
¿las imágenes serán todas del mismo tamaño (largo x ancho)? o serán dispares.
Si son de distintos tamaños, ¿su relación L/H será misma?

Fíjate en el mural que realizamos en fdw, en concreto en las propiedades de las cajas "#contenedor" (que encierra a todas las imágenes) y ".mural" (que contiene cada imagen individual).

Si quieres algo más centrado en tu caso concreto, aporta algún dato más, incluso mejor, pon un enlace a lo que ya tienes realizado. Así podremos ser más precisos con tus necesidades.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 25/10/2009, 17:59
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar imagenes horizontalmente

murderer fue una especulacion... no ahorrarte el trabajo jeje...
Cita:
basta con encerrar a la foto+descripcion en un solo div... darle un ancho y flotarlo a la izquierda... y el resto flotara... hasta que llege al limite del ancho del div padre y se colapsa solito... asi que si du div tiene 160px de ancho cuando llege a 800px (160*5) del div padre se colapsa chao y suerte!...
y con lo que pone kseso? ya debes tenerlo... solo hay que leer e intentar
  #8 (permalink)  
Antiguo 25/10/2009, 18:46
Avatar de murderer  
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 8 años, 8 meses
Puntos: 2
Respuesta: Centrar imagenes horizontalmente

Hola,
Son todas las imagenes del mismo tamaño:
Archivo galeriadefotos.php
http://paginasdeprueba.comunidad-mis...riadefotos.php
Documento CSS
http://paginasdeprueba.comunidad-mis...om/estilos.css

alexk, es la segunda vez que copio un ejemplo muy literalmente jaja.

Muchas gracias,

Saludos!
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter
  #9 (permalink)  
Antiguo 25/10/2009, 19:08
Avatar de murderer  
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 8 años, 8 meses
Puntos: 2
Respuesta: Centrar imagenes horizontalmente

Huy, no se como no me pude haber dado cuenta antes, Tenia <p> entre cada imagen!

Gracias a los 2, va karma

Saludos!
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter
  #10 (permalink)  
Antiguo 25/10/2009, 19:49
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar imagenes horizontalmente

Cita:
es la segunda vez que copio un ejemplo muy literalmente jaja.
jeje... hay que estudiarlo antes... que muchas veces vienen cosas de mas o de menos... tansolo es para darnos ideas y adaptarlas anuestras necesidades.

pero enfin ya lo tienes solucionado?...
  #11 (permalink)  
Antiguo 25/10/2009, 21:07
Avatar de murderer  
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 8 años, 8 meses
Puntos: 2
Sonrisa Respuesta: Centrar imagenes horizontalmente

Si, tienes razón, pero me hubiese servido antes .

Solucionado

Muchas gracias a los 2

Saludos!
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter
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 08:33.