Выравнивание нескольких изображений по горизонтали в центре div

Question

У меня есть div, и я хочу выровнять по центру этого div нескольких изображений. Все изображения имеют одинаковую высоту и ширину 16 пикселей. Проблема в том, что я могу либо центрировать их, либо иметь дополнительное пространство ниже, но когда я использую дисплей: блок для его удаления, они снова выравниваются влево. Вот мой код:

DIV, который я хочу, чтобы содержать изображения:

.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; 
} 

выше класса имеет свойство, необходимое в целом. Итак, я хочу создать класс для элементов img, чтобы их можно было выровнять один рядом друг с другом и все вместе выровнять по горизонтали.

Любые рабочие предложения ?! :)

Answer 1

Плавающий элемент уровня блока будет толкать его влево или вправо. «display: inline-block» в IMG. И удалите операторы float и position. Затем «text-align: center» для контейнера div.

http://jsfiddle.net/B6Jsy/

Я использовал DIV как поддельные IMG но он должен работать так же.

Answer 2

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

.ImageHolder{ 
text-align:center; 
} 

.Image{ 
display:inline-block; 
}