Foros del Web » Creando para Internet » CSS »

Alinear 3 imagenes

Estas en el tema de Alinear 3 imagenes en el foro de CSS en Foros del Web. Buenas, quiero crear un "header" para un album de fotos y necesito que, dentro de un div con un background que se repite horizontalmente, haya ...
  #1 (permalink)  
Antiguo 25/04/2009, 03:48
 
Fecha de Ingreso: julio-2007
Mensajes: 62
Antigüedad: 17 años, 4 meses
Puntos: 0
Alinear 3 imagenes

Buenas, quiero crear un "header" para un album de fotos y necesito que, dentro de un div con un background que se repite horizontalmente, haya tres imagenes:
la primera que flote a la izquierda, la segunda que esté siempre en el centro del header y la ultima que flote a la derecha.
Consigo que se coloquen bien las imagenes de la izquierda y la derecha, pero ¿como puedo colocar esa imagen central?

Código PHP:

.header {
    
width100%;
    
backgroundurl(header_bg.png);
    
floatleft;
}
.
header img {
    
floatleft;
}
.
header img.alignright {
    
floatright;
}


<
div class="header">
        <
img src="header_izq.jpg" />
        <
img src="central.jpg" />
        <
img class="alignright" src="header_dcha.jpg" />
    </
div
  #2 (permalink)  
Antiguo 25/04/2009, 05:05
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: Alinear 3 imagenes

Código:
.header {
    width: 100%;
    background: url(header_bg.png);
    float: left;
}

.header div {
    width: 33%;
}

#cont2 {text-align: left}; /*Este no deberia ser necesario*/
#cont2 {text-align: center};
#cont3 {text-align: right};

<div class="header">
   <div id="cont1"><img src="header_izq.jpg" /></div>
   <div id="cont2"><img src="central.jpg" /></div>
   <div id="cont3"><img class="alignright" src="header_dcha.jpg" /></div>
</div>
  #3 (permalink)  
Antiguo 25/04/2009, 05:26
 
Fecha de Ingreso: julio-2007
Mensajes: 62
Antigüedad: 17 años, 4 meses
Puntos: 0
Respuesta: Alinear 3 imagenes

Pero asi lo que ocurre es que me las coloca verticalmente, y lo que necesito es que esten horizontales

EDITO: Ya lo he arreglado, el codigo es parecido al que has posteado matados2k:

Código PHP:
.header {
    
width100&#37;;
    
backgroundurl(header_bg.jpg);
    
floatleft;
}
.
header div {
    
width33%;
    
floatleft;
}
#right {float: right;text-align:right;}


<div class="header">
        <
div><img src="header_izq.jpg" /></div>
        <
div><img src="central.jpg" /></div>
        <
div id="right"><img src="header_dcha.jpg" /></div>
    </
div
GRACIAS!

Última edición por Pollito_69; 25/04/2009 a las 05:38
  #4 (permalink)  
Antiguo 25/04/2009, 06:00
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: Alinear 3 imagenes

Cita:
Iniciado por Pollito_69 Ver Mensaje
Pero asi lo que ocurre es que me las coloca verticalmente, y lo que necesito es que esten horizontales

EDITO: Ya lo he arreglado, el codigo es parecido al que has posteado matados2k:

Código PHP:
.header {
    
width100%;
    
backgroundurl(header_bg.jpg);
    
floatleft;
}
.
header div {
    
width33%;
    
floatleft;
}
#right {float: right;text-align:right;}


<div class="header">
        <
div><img src="header_izq.jpg" /></div>
        <
div><img src="central.jpg" /></div>
        <
div id="right"><img src="header_dcha.jpg" /></div>
    </
div
GRACIAS!
Lo he posteado sin probar, lo hago de cabeza, por lo que no estoy libre de errores. De nada ;)
  #5 (permalink)  
Antiguo 25/04/2009, 12:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 meses
Puntos: 361
Respuesta: Alinear 3 imagenes

Hola:

Si no me equivoco, el text-align:center solo sirve para centrar texto, no imágenes.

Saludos.

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 21:56.