Как расположить иконки в ряд с подписями (HTML, CSS)?

Question

[Shrt]

Здравствуйте! Я прошу прощения, вопрос наверное очень нубский, но я новичек бьюсь над проблемой, казалось бы простой но все же.
Я хочу понять понять как размещать иконки или картинки строго по середине, в один ряд, и чтоб с подписями. На одном изображении которое я прикрепил примерно то, что мне надо, на втором то, что получается. Спасибо большое всем, кто откликнется!

Answer 1

[serghost]

Как насчет модного молодежного flexbox? (ie10+)
https://jsfiddle.net/327ssbs6/2/

Преимущество флекса в том, что он позволяет центрировать как горизонтально, так и вертикально. К тому же, блоки, которые мы хотим выровнять могут быть случайного размера.

Comments

[Shrt]

Кстати, я когда искал эти дни решение наталкивался на flexbox, но так и не разобрался. Спасибо большое, сейчас попробую.

[Dvorak]

Shrt: flexbox реально крут. Никаких костылей, понятный синтаксис.

https://habrahabr.ru/post/242545/

[Zhainar]

Модный молодежный)) А стариковский метод - это таблицы?

[serghost]

Zhainar: именно :)

Answer 2

[Damir Aushenov]

https://jsfiddle.net/arqcvhsa/2/
там достаточно указать text-align: center;

Comments

[Shrt]

Спасибо большое за ответ! Но я пробовал и так, в ряд не получается, получается столбик да еще и влево уходит совсем. Мне же надо именно в ряд их.

[Damir Aushenov]

https://jsfiddle.net/arqcvhsa/4/

[Shrt]

Дамир Аушенов: Спасибо большое! Только как их теперь по центру расположить, ряд полностью влево уходит..

[Сергей]

Можно использовать display: inline-block;
https://jsfiddle.net/arqcvhsa/6/

Answer 3

[Dark Hole]

Немного погуглив, нашел такое решение
margin: 0 auto;
Но у меня почему - то не выходит(
Остается 2 варианта:
если ширина известна то

position: relative;
left: calc(50% - 45px)

Вместо 45px - половина ширины
если нет - только javascript