web-dev-qa-db-fra.com

Alignement horizontal de plusieurs images au centre d'une div

J'ai une div et je veux aligner au centre de cette div plusieurs images. Toutes les images ont la même hauteur et la même largeur de 16 pixels. Le problème est que je peux soit les centrer et avoir l'espace supplémentaire en dessous mais quand j'utilise l'affichage: bloquer pour le retirer, ils sont à nouveau alignés à gauche. Voici mon code:

div dont 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 a 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 les uns à côté des autres et tous ensemble alignés horizontalement.

Des suggestions de travail?! :)

htmlcssimagecenteralignment
24
Dimitris Damilos

Flotter 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 cela devrait fonctionner de la même manière.

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

.ImageHolder{
text-align:center;
}

.Image{
display:inline-block;
}
8
molu2008