Aligner plusieurs images horizontalement au centre d'un div

Question

J'ai un div et je veux aligner au centre de ce div multiples images. Toutes les images ont la même hauteur et largeur de 16px. Le problème est que je peux soit les centrer et avoir l'espace supplémentaire ci-dessous mais quand j'utilise le display: block pour l'enlever, ils sont de nouveau alignés à gauche. Voici mon code:

div que je veux contenir les images:

.cell{ 
    position: relative; 
    float: left; 
    width: 300px; 
    min-height: 22px; 
    border-bottom: 1px solid #000; 
    border-right: 1px solid #000; 

    line-height: 22px; 
    font-family: Arial, Verdana; 
    font-size: 12px; 
    color: #000; 
    text-decoration: none; 
    text-align: center; 

    margin-bottom: 2px; 
    margin-right: 2px; 
} 

La classe ci-dessus présente les propriétés nécessaires en général. Je veux donc créer une classe pour les éléments img afin qu'ils puissent être alignés l'un à côté de l'autre et tous alignés horizontalement.

Des suggestions de travail ?! :)

Answer 1

Flottant un élément de niveau bloc le poussera vers la gauche ou la droite. "display: inline-block" sur l'IMG. Et supprimez les instructions float et position. Puis "text-align: center" pour le conteneur div.

http://jsfiddle.net/B6Jsy/

J'ai utilisé un div comme un faux img mais il devrait fonctionner de la même chose.

Answer 2

<div class="Image">FIRST</div> 
<div class="Image">SECOND</div> 

.ImageHolder{ 
text-align:center; 
} 

.Image{ 
display:inline-block; 
}