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

У меня есть 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, чтобы их можно было выровнять один рядом друг с другом и все вместе выровнять по горизонтали.

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

Ответ 1

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

http://jsfiddle.net/B6Jsy/

Я использовал div как поддельный img, но он должен работать одинаково.

Ответ 2

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

.ImageHolder{
text-align:center;
}

.Image{
display:inline-block;
}