Centrar galería de imágenes con CSS


HTML, CSS, PHP, JavaScript, Java... tus dudas por aquí...
   

Centrar galería de imágenes con CSS

Notapor Manuel de la Fuente » May 2010, 11:48

He creado un pequeño sistema para hacer galerías de imágenes fácilmente y que pienso utilizar en mis entradas; sólo tengo una dificultad, y es que no puedo hacer que las imágenes queden centradas. No sé si me explique bien, así que seré más específico.

El código que utilizo es este:

Código: Seleccionar todo
<div class="imggallery">

<div>
<img src="URLimagen1" alt="Título imagen 1">
<p>Descripción imagen 1</p>
</div>

<div>
<img src="URLimagen2" alt="Título imagen 2">
<p>Descripción imagen 2</p>
</div>

[...]

</div>


Y estos son los estilos:

Código: Seleccionar todo
.imggallery {
margin:1em 0;
overflow:hidden;
text-align:center;
width:100%;
}
.imggallery p {
font-size:0.9em;
margin:2px 0;
}
.imggallery div {
float:left;
margin-right:15px;
}


Un ejemplo es esta entrada en donde pueden ver cómo ambas imágenes están bien, una al lado de la otra, pero se van a la izquierda y hacia arriba. Lo que quiero es que queden al centro y hacia abajo.
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: Centrar galería de imágenes con CSS

Notapor elQuique » May 2010, 16:10

Para centrar una imagen en un contenedor basta usar el text-align: center

El tema es quizás se te complique centrar el contenedor, que si es uno solo debes tener ancho fijo y margenes izdo y dcho automáticos.

Si son 3 contenedores en una línea ancho 33%, y así pues...

En las 2 imagenes que tienes ahí usaría 2 contenedores con ancho 50% (cuidado con margenes y paddings).
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2039
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Re: Centrar galería de imágenes con CSS

Notapor Manuel de la Fuente » May 2010, 16:47

Mmm, el detalle es que lo que busco es un código que sirva igual para galerías con dos imágenes que con tres, cuatro, etc. ¿Conoces alguna forma de lograrlo? ¿Y cómo se podría hacer para que estén todas las imágenes a la misma altura y no una más arriba que la otra?
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: Centrar galería de imágenes con CSS

Notapor elQuique » May 2010, 17:05

Si claro que conozco jaja, no es lo que te dije más arriba ?
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2039
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Re: Centrar galería de imágenes con CSS

Notapor Manuel de la Fuente » May 2010, 17:27

Jeje, no, tú me dijiste que si son 2 imágenes ponga el ancho al 50%, si son 3 se pone al 33%, y así. O sea, que el valor cambia según el número de imágenes que tenga.

Bueno, acabo de lograr el efecto que quería, pero usando una tabla en vez de divs. Los estilos fueron estos:

Código: Seleccionar todo
.imggallery {
margin:1em 0;
text-align:center;
width:100%;
}
.imggallery p {
font-size:0.9em;
margin:2px 0;
}
.imggallery td {
vertical-align:bottom;
}


Creo que debería funcionar igual sin importar cuántas imágenes ponga en la misma línea. Hubiera preferido usar divs, pero bueno...

No me van a crucificar por haber utilizado tablas, ¿o sí? :redface:
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: Centrar galería de imágenes con CSS

Notapor elQuique » May 2010, 18:49

Pero porque usas tablas ?, si son tablas también tienes que saber el numero de columnas !!!, en ese caso es lo mismo usar DIVs o mejor aun Listas !.

O incluso puedes usar display: table y cell ....
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2039
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Re: Centrar galería de imágenes con CSS

Notapor Manuel de la Fuente » May 2010, 19:40

No, a lo que me refiero es que esos mismos estilos que están ahí sirven igual si coloco 2 imágenes que tres, cuatro o más, no tengo que modificar absolutamente ningún valor. Con lo que me decías arriba tengo que cambiar el porcentaje según el número de imágenes que coloque.

Lo del display:table; y display:table-cell; no lo quise usar porque según vi en un curso de CSS no sirve en IE7, pero ya estuve experimentando y me gustó más. Lo apliqué de esta forma:

.imggallery {
display:table;
margin:1em 0;
text-align:center;
width:100%;
}
.imggallery p {
font-size:0.9em;
margin:2px 0;
}
.imggallery div {
display:table-cell;
vertical-align:bottom;
}


Y para IE7 e inferiores agregué los estilos que tenía al inicio:

<!--[if lte IE 7]>
<style type="text/css">
.imggallery {
overflow:hidden;
}
.imggallery div {
float:left;
margin-right:15px;
}
</style>
<![endif]-->


¿Qué opinas?
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: Centrar galería de imágenes con CSS

Notapor Manuel de la Fuente » May 2010, 20:17

Como dije cuando abrí el tema, la galería la hago así:

<div class="imggallery">

<div>
<img src="URLimagen1" alt="Título imagen 1" />
<p>Descripción imagen 1</p>
</div>

<div>
<img src="URLimagen2" alt="Título imagen 2"/>
<p>Descripción imagen 2</p>
</div>

[...]

</div>
Última edición por Manuel de la Fuente el May 2010, 05:29, editado 1 vez en total
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: Centrar galería de imágenes con CSS

Notapor elQuique » May 2010, 00:20

Si el IE7 y todos los IE no saben que existe HTML y CSS jaja siquiera saben que existen otras cosas que no sea un red local Windows :P, esta bien usar comentarios condicionales :)
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2039
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique


¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados