Problema con Div

Muy buenas tardes. El objetivo que tengo es centrar horizontalmente varios divs que poseen una imagen de fondo y que se estan generando automaticamente con base en una consulta sobre una base de datos (Paginar). Aqui en Cristalab encontre un post en el cual explicaban como hacerlo, pero mi problema es que el DIV que esta contenido no esta tomando el tamaño que deseo y que debe de ser acorde a la imagen.

HTML:

Código :

 if($eso > 1){?> 
         
      <div class="cajon2">
      <?
      for($i = 1; $i <= $eso; $i++)
      {
         if($pagina== $i){?>
            <div class="cajon" id="div <? echo $i;?>">Pag <? echo $pagina; ?></div>
                      <? }else{ ?>
            <div class="cajon" id="div <? echo $i;?>"><a href="productos.php?pagina=<? echo $i; ?>&op=<? echo $_GET['op'] ?>&prod=<? echo $producto ?>">Pag <? echo $i ?></a></div><?
              }
           }
      ?>      
      </div><?
   }
    ?>

CSS:

Código :

.cajon{   
   width:50px;
   height:26px;
   background-image:url(../imgproductos/paginar.png);
   margin: 0px 0px 0px auto;
   border: 1px solid red;
}

.cajon2{
   margin: 0px auto 0px auto;
   text-align:center;
   height:26px;
   border: 1px solid red;
   
   }
.cajon2 div{ 
   display:inline; 
   position:relative;
}

Ante nada, debo decir que no he estado muy relacionado con el CSS. En fin, cajon2 es el DIV contenedor, el cual tiene un text-align center y un border a manera de prueba para visualizar mejor la situacion, tambien se le especifica el alto, el cual se ve reflejado. cajon es la estructura general de los divs que se generan automaticamente, en el cual se especifica un alto y un ancho acorde a la imagen (50x26). Ademas de esto se le da un margin y un border que utilizo a manera de prueba.
El problema es que los divs que se estan generando (class="cajon"), no estan utilizando estas medidas, utilizan medidas por defecto y la imagen no se ve completamente.

Muchas gracias por su colaboracion. Como dije anteriormente, no estoy muy familiarizado con el CSS, disculparan alguna ingenuidad por ahi

Ah y una ultima pregunta, en que momento es mejor utilizar una clase o un id en CSS. De nuevo muchas gracias,

Que esten muy bien.

Feliz navidad y prospero año nuevo para todos.

Para que un elemento tome el alto y/o ancho a través de css, el atributo "display" debe tener en valor "block". entonces a cajón deberías agregarles:

Código HTML :

display: block; 

Respecto al tema de los id's y las clases: Los primeros son elementos únicos en tu página (sólo debe haber un elemento con un id) mientras los segundos se usan cuando hay más de un elementp al que quieres aplicar los atributos. Piensa en los id como en nombres específicos para elementos específicos y en la clase como en un tipo de elementos.
Y ya para que seas mejor persona y más eficiente, te recomiendo que visites el Curso de HTML y CSS de Clab.

Muchas gracias por la respuesta. Le comento, agregue el

Código :

display:block;

a cajon y no obtengo el resultado que quiero. Desde el poco conocimiento que tengo, estoy especificando en:

Código :

.cajon2{
   margin: 0px auto 0px auto;
   text-align:center;
   height:26px;
   border: 1px solid red;
   
   }
.cajon2 div{ 
   display:inline; 
   position:relative;
}

...que cuando se aplique esa clase a un elemento de tipo div utilize un display de tipo inline y que la posicion sea relativa. Cuando coloco esta misma propiedad en cajon, no habria ningun tipo de conflicto?... cuando lo coloco, se sigue manteniedo de la misma forma:



Por ejemplo, cuando especifico que el display sea block en cajon div (por ejemplo) a imagen se ve asi, el cual es el tamaño normal pero se ve al lado derecho:



Muchas gracias por la recomendacion del manual y por la respuesta. Que este muy bien.

Alguna idea... .

La verdad es que ahora sí me perdí, no entiendo cómo funciona lo que pretendes hacer ¿puedes explicar más detalladamente qué es lo que buscas? Si puedes dar un link o colocar una imagen especificando, pues muucho mejor.