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

21

У меня есть 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
источник
  • Как насчет кода HTML? –  HerrSerker 24.02.2012 в 17:12
  • Вот скрипка, которую я собрал. Просто чтобы все переместилось: jsfiddle.net/ah2Uw –  thepriebe 24.02.2012 в 17:16
  • Итак, вы хотите, чтобы div обнимал изображения внизу? Я смущен тем, что вы действительно хотите сделать здесь. У вас есть min-height: 22px ;, поэтому у вас будет дополнительное пространство внизу, так как ваши изображения 16px. –  thepriebe 24.02.2012 в 17:19
  • thepriebe, вы были правы. В вашем решении я просто добавил высоту и ширину моей ячейки, и все работало правильно. Спасибо вам за ваш быстрый ответ! :) –  Dimitris Damilos 24.02.2012 в 17:49

2 ответа

42

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

Ссылка

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

    
ответ дан jmbertucci 24.02.2012 в 17:17
источник
  • Спасибо, это очень помогло мне сегодня. –  drew010 26.04.2012 в 02:02
  • Хороший ответ! Помог мне много! –  Rameez Hussain 03.03.2015 в 23:32
  • @jmbertucci Ты спас меня! –  OscarRyz 29.07.2016 в 01:29
5

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

.ImageHolder{
text-align:center;
}

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