Foros del Web » Creando para Internet » CSS »

centrado de imagenes

Estas en el tema de centrado de imagenes en el foro de CSS en Foros del Web. Hola, tengo una pequeña duda. Os expongo el tema, tengo una web con una anchura de 600 px, en el footer tengo que poner tres ...
  #1 (permalink)  
Antiguo 11/01/2007, 07:39
 
Fecha de Ingreso: enero-2007
Mensajes: 1
Antigüedad: 10 años, 11 meses
Puntos: 0
centrado de imagenes

Hola, tengo una pequeña duda.

Os expongo el tema, tengo una web con una anchura de 600 px, en el footer tengo que poner tres imagenes con los logos de los patrocinadores del proyecto que tienen 100px de ancho cada una.

Es posible mediante css centrarlas en los 600px, para que tengan el mismo espacio entre ellas?

A ver si este esquema me ayuda a explicarme:

Código:
Tengo esto, las X son las imagenes:
-----------
    XXX

Y necesitaría colocarlas así:
-----------
X    X    X
¿Es posible hacerlo mediante CSS sin tener que calcular los pixeles de margen? por ejemplo para una web que tenga una anchura relativa.

Un saludo y mil gracias
  #2 (permalink)  
Antiguo 11/01/2007, 08:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: centrado de imagenes

Hay una manera sencilla, aunque creo que poco conocida. Prueba esto:

Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <title>Pie con contenido centrado</title>
  <style type="text/css">
  #pie { display: table;
    margin-right: auto;
    width: 600px;
    margin-left: auto;
    }

  .logos { text-align: center;
    display: table-cell;
    }
  </style>
</head>
<body>
<div id="pie">
<div class="logos"><img
 style="width: 100px; height: 80px;" alt="Logo 1"
 src="logo1.jpg" /></div>
<div class="logos"><img
 style="width: 100px; height: 80px;" alt="Logo 2"
 src="logo2" /></div>
<div class="logos"><img
 style="width: 100px; height: 80px;" alt="Logo 3"
 src="logo3" /></div>
</div>
</body>
</html>
Evidentemente con tus imágenes y las medidas que correspondan a cada cosa. Como ves se basa en dar al contendor un display: table, y a cada div de cada imagen un display: table-cell.

Espero que te sirva.

Mikel.
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 06:02.