De HTML a CSS

Hola, tengo una tabla en HTML compuesta por una fila y 5 columnas, dentro de cada columna hay una imagen, un br y un texto. Es decir, algo así:

Código HTML :

<table>
  <tr>
    <td>
      <img src="imagen.jpg">
      <br>
      TEXTO
    </td>
    <td>
      <img src="imagen.jpg">
      <br>
      TEXTO
    </td>
    <td>
      <img src="imagen.jpg">
      <br>
      TEXTO
    </td>
    <td>
      <img src="imagen.jpg">
      <br>
      TEXTO
    </td>
    <td>
      <img src="imagen.jpg">
      <br>
      TEXTO
    </td>
  </tr>
</table>

Quiero obtener el mismo resultado pero usando CSS. Ahora tengo un div que contiene dentro otros 5 divs cada uno de ellos con la imagen y el texto pero no funciona, me aparece todos alineados en la misma posición unos encima de otros.

¿Como resuelvo este problema?.

Un saludo.

Mira a ver si este ejemplo te sirve de guía

Saludos

Que tal perico19 checate esto haber si te es de utilidad. Saludos

Código HTML :

<style>
/*con esta clase CSS, creo la division donde estaran 
mis elementos con las imagenes y el texto*/
.margenDeCajas{
   width:100%;
   height:140px;
   background:#CCC;
}
/*cajas autoajustables */
.caja{
   width:auto;/*"puedes delimitar un ancho fijo en pixeles"*/
   height:120px;
   float:left;/*IMPORTANTE flotar cada elemento a la izquierda del otro*/
   margin:10px 0 10px 10px; /*margen de separacion entre cada elemento*/
   background:#F00;
}
/*con esta regla CSS decimos que todas las 
imagenes que esten dentro de una clase "caja", van a 
tener un ancho y alto de 80 pixeles*/
.caja img{
   width:80px;
   height:80px;
}

</style>
<div class="margenDeCajas">
   <div class="caja">
       <img src="http://www.cristalab.com/images/header/logo.png" />
        <p>Logo cristalab.com</p>
    </div>
    
    <div class="caja">
       <img src="http://www.cristalab.com/images/header/logo.png" />
        <p>Logo cristalab.com y un texto mas</p>
    </div>
    
    <div class="caja">
       <img src="http://www.cristalab.com/images/header/logo.png" />
        <p>Logo cristalab.com con un texto mas largo para de veas que se ajusta el ancho</p>
    </div>
    
    <div class="caja">
       <img src="http://www.cristalab.com/images/header/logo.png" />
    </div>
    
    <div class="caja">
       <img src="http://www.cristalab.com/images/header/logo.png" />
        <p>cristalab.com</p>
    </div>
</div><!--/margenDeCajas-->

Tengo este cógico css en la hoja de estilos:

Código :

.cabecera {
   background:#ebebeb;
   height:100px;
   margin:0% auto;
   margin-bottom:2px;
   margin-top:2px;
   overflow:hidden;
   width:80%;
}

.secciones {
     *display: inline; /* IE */
   display: -moz-inline-stack; /* FF2 */
   display: inline-block;
     float: left;
     padding: 2px;
   vertical-align: top; /* baseline correccion */
     width:auto;
    zoom: 1; /* IE7 (hasLayout) */
}

.secciones img {
   display:block;
}

.secciones p {
   font-size:12px;
   text-align:center;
}

Y este otro en el fichero HTML:

Código HTML :

<div class="cabecera">
       <div class="secciones">
           <img src="../image/icono.gif" />
           <p>PUBLICIDAD 1</p>
        </div>
        <div class="secciones">
           <img src="../image/icono.gif" />
           <p>PUBLICIDAD 2</p>
        </div>
</div>

Bien, el resultado es que todo me aparce alineado a la izquierda, es decir las imágenes y el texto están a la izquiera, y no solo eso, si a la calse secciones de doy un width de 300px en vez de auto, he observado que el texto si está en el centro pero las imágenes siguen a la izquierda.

Por lo tanto hay dos cosas que no consigo hacer, una de ellas es que los contenedores de la clase .secciones estén en el dentro del contenedor de la clase .cabecera. La otra es que las imágenes de la clase .secciones estén alineadas al centro de su contenedor.

He encontrado esta clase:

Código :

.centrarH {
    width:270px;
    height:150px;
    margin:0 auto;
}

Ahora tengo el div de la clase .cabecera, que es el superior, dentro de él hay un div de la clase .centrarH y a su vez, dentro de éste, los dos div´s que quería centrar y ya están centrados.

Os paree bien esta solución.