Разместить несколько картинок рядом по горизонтали с подписями?

Question

[Алекс]

(Начинающий) Добрый день! Пытаюсь добавить подписи к картинкам расположенные по горизонтали на основе этого примера https://jsfiddle.net/NsRwa/6/. Пробовал разные варианты , но картинки становятся в вертикальный ряд. Какой вариант решения наиболее простой ,что бы получить подпись вида jsfiddle.net/dokxpi/8osdmc1x ?

Answer 1

[iBird Rose]

https://jsfiddle.net/NsRwa/8/

Comments

[Алекс]

Thank you very much!

[Sergey Brin]

А возможно ли расположить все фотографии ровно посередине? Фотографий 4.

[iBird Rose]

name waak, гугли работу с flex

Answer 2

[Андрей Федоров]

https://jsfiddle.net/47rm8kwc/

Comments

[Алекс]

Андрей спасибо Вам большое именно то что надо !

[Андрей Федоров]

Обратите внимание, что комментарии в html коде "" не просто так.

[Андрей Федоров]

Александр: ) Там было <!-- --> Теги ограничивающие комментарий в html. Тостер их просто порезал. Суть в том, что они очень важны. Если их убрать браузер будет вставлять между блоками дополнительный интервал, что поломает верстку. iBird Rose в своем примере решает эту проблему с помощью font-size: 0. Что не совсем корректно, т.к. для вложенных блоков придется восстанавливать размер шрифта (в примере это font-size: 14px), а это всегда невозможно - неизвестно какой размер шрифта был до этого.

[iBird Rose]

Андрей Федоров: на вкус и цвет...

[Андрей Федоров]

iBird Rose: Тут проблемы могут возникнуть, лучше тогда так: https://jsfiddle.net/9jsL6mjq/2/ тогда проблемы если и будут, то только в IE.

[Алекс]

Андрей Федоров: Уловил разницу и посмотрел что происходит без них. Спасибо Вам!

[Алекс]

Андрей приветствую !
Я опубликовал вопрос ссылкой на Ваш код надеюсь может найдется решение мой проблемы!) Спасибо!