Как выровнять изображения и текст во горизонтали/по центру?

Question

[Денис Николаев]

Добрый день.
Сразу скажу что решение искал, html book читал но не понимаю как реализовать.
Задача отцентрировать по горизонтали и по центру 4 картинки и по 2 надписи к ним. (Пример как на рисунке)
Есть код HTML:

<div class="counter">
<img src="/img/1.png"><p>Текст 1</p><p>Текст 2</p>
<img src="/img/2.png"><p>Текст 1</p><p>Текст 2</p>
<img src="/img/3.png"><p>Текст 1</p><p>Текст 2</p>
<img src="/img/4.png"><p>Текст 1</p><p>Текст 2</p>
</div>

У меня проблема здесь - код CSS:

.counter{
	display: inline-block;
	position: absolute;	
	left: 25%;
	background: #9dceb4;
	white-space: nowrap;
	text-align: center;
}

.counter img{
	display: inline-block;
	margin: 5px;
	width: 200px;
	white-space: nowrap;
}

.counter p{

}

Что неправильно я делаю?
Дайте рекомендации, не могу реализовать.
Выравнивается все по вертикали а не по горизонтали.

Answer 1

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

Держите https://codepen.io/aliencash/pen/LjdxZM?editors=1100#0
Но в принципе так никто не делает как вы. Для картинок и подписей к ним есть семантические теги fugure и figcaption.

Comments

[Денис Николаев]

Спасибо, я пока учу базу.
Как сказал автор одного из прекрасного видео на ютубе - база обязательна =)
В связи с чем я пока таких способов не знаю.

Answer 2

[cssfish]

каждый набор
<img src="/img/1.png"><p>Текст 1</p><p>Текст 2</p>
заверните в див и его уже инлайн-блоком используйте