centrado de imagenes

rulzgz · #1 (**permalink**) 11/01/2007, 07:39

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

Mikmoro · #2 (**permalink**) 11/01/2007, 08:18

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.