Горизонтальный контейнер для изображений DIV

0

Я пытаюсь, чтобы мои изображения выравнивались по горизонтали, но я, кажется, что-то делаю неправильно, но я не знаю, в чем проблема.

Здесь JSFiddle: http://jsfiddle.net/ByDAA/4/

Здесь CSS:

.imgcontainer img {
display:inline-block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
margin:0px 37px 0px 0px;
width:175px;
height:175px;
}
  • 0
    Вы хотите, чтобы контейнер был центрирован, или изображения внутри контейнера?
  • 0
    @JoshC Да, я хочу, чтобы контейнер располагался по центру, и я хочу, чтобы изображения располагались горизонтально друг к другу.
Показать ещё 4 комментария
Теги:

5 ответов

1
Лучший ответ

Вы должны обернуть каждый img и p div и использовать float:left. Пример: скрипка

Поделиться
  • 0
    Я сделал небольшие изменения в вашем, но теперь не могу выровнять его по центру. jsfiddle.net/ByDAA/17
  • 0
    Вы можете помочь мне это исправить?
Показать ещё 1 комментарий
1

Вам нужно обернуть каждое изображение и текстовый элемент в определенный элемент (div или рисунок).

Вероятно, цифра лучше всего, поскольку она позволяет использовать элемент figcaption внутри него для текста.

Каждая фигура задается как display:inline-block и vertical-align: top и контейнер установлен в text-align:center

Пример Codepen

Поделиться
1

Может быть, это то, что вам нужно? http://jsfiddle.net/taneleero/ByDAA/7/

Предполагая, что вы хотели бы, чтобы "Let Us Sell It" соответствовали каждому изображению, я добавил контейнеры вокруг каждого изображения + текст и назначил их встроенным блокам. Для контейнера я назначил text-align: center, поэтому встроенные блоки будут выравниваться по центру. Также я изменил изображение на отображение: блок, чтобы заставить текст под изображением.

  .container {
      position: absolute;
      margin: auto;
      width: 100%;
      text-align:center;
  }
  .imgcontainer img {
      display:block;
      position:relative;
      padding:1px;
      border: 1px solid #c4c4c4;
      width:175px;
      height:175px;
  }
span {
    display:inline-block;
    margin:0px 37px 0px 0px;
}
Поделиться
0

Вы видите разрывы строк, потому что вы явно положил их там с <br> элементов.

Чтобы достичь намеченного эффекта, поместите изображения и их подтексты в отдельный контейнер (div или article) и примените к нему этот стиль display:inline-block.

Поделиться
  • 0
    Да, я сделал это раньше, и он работает, но на мобильном устройстве он не отображается правильно из-за отдельного контейнера.
0

пытаться:

    float: left;

и измените свой css - удалите незавершенные свойства

Поделиться
  • 0
    Не будет работать до тех пор, пока его HTML не работает с редкими элементами br и p между изображениями.
  • 0
    @NielsKeurentjes Я удалил BR и P, что теперь?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню