How to arrange icons in a row with captions (HTML, CSS)?

Question

css

Hello! I'm sorry, the question is probably very noob, but I'm a beginner struggling with a problem that seems simple but still.
I want to understand how to place icons or pictures strictly in the middle, in one row, and so that with captions. On one image that I attached, about what I need, on the second, what I get. Thank you very much to everyone who will respond!

Answer 1

How about trendy youth flexbox? (ie10+)
https://jsfiddle.net/327ssbs6/2/
The advantage of flex is that it allows you to center both horizontally and vertically. In addition, the blocks we want to align can be of random size.

Answer 2

https://jsfiddle.net/arqcvhsa/2/
it is enough to specify text-align: center;

Answer 3

Googling a little, I found such a solution
. But for some reason it doesn’t work out for me (
2 options remain:
if the width is known, then

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

Instead of 45px - half the width
if not - javascript only