Centrar imagenes horizontalmente

[murderer]

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!

[alexk]

"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

[murderer]

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!

[alexk]

bueno... se me ocurre...

Código css:

#perfilgalfotoheader {
background:url(img/header_box.png) repeat-x;
width:640px;
height:30px;
/*overflow:auto;*/
}
 
#perfilgalfotocenter {
background:#FFFFFF;
/*width:680px;*/
width:800px;
/*height:230px;
overflow:auto;*/
}
 
.foto{ width:160px; float:left;}
 

Código html:

<div id="perfilgalfoto">
    <div id="perfilgalfotoheaderleft"></div>
    <div id="perfilgalfotoheaderright"></div>
    <div id="perfilgalfotoheader">
        <p>Galeria de imagenes</p>
    </div>    
    <div id="perfilgalfotocenter">
        <div class="foto">
            <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 class="foto">
            <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 class="foto">
            <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 class="foto">
            <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 class="foto">
            <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 class="foto">
            <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 class="foto">
            <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>
<div id="perfilgalfotofooter">
</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!...

[murderer]

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!

[kseso?]

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

[alexk]

murderer fue una especulacion... no ahorrarte el trabajo jeje...

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

[murderer]

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!

[murderer]

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

Gracias a los 2, va karma

Saludos!

[alexk]

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

[murderer]

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

Solucionado

Muchas gracias a los 2

Saludos!