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

17

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

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

задан Dimitris Damilos 24.02.2012 в 17:08
источник

2 ответа

37

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

Ссылка

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

    
ответ дан jmbertucci 24.02.2012 в 17:17
источник
4

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

.ImageHolder{
text-align:center;
}

.Image{
display:inline-block;
}
    
ответ дан molu2008 21.05.2015 в 12:33
источник