Как позиционировать элементы по кругу?

Question

[Heorhii]

Добрый вечер. Искал в инете но увы. Нужно разместить допустим иконки, по кругу относительно круглого блока. Одна вверху, слева и справа по две. При этом под иконками есть текст. И в этом самая большая проблема как по мне ибо если юзать тег p то это строчный элемент и все сьезжает. Span тоже не подходит. Текст должен быть сразу под иконкой. Ну и помимо текста нет идей как сами иконки по кругу всунуть. Надеюсь кто нибудь знает решение данной проблемы. Подскажите

Answer 1

[Mary Солнечная]

Создаете родительский блок, вокруг которого будут несколько дочерних:

<div class="content_wrap">
    <div class="content_box">
         <i></i>
         <span>Признание</span>
     </div>
<div class="content_box">
         <i></i>
         <span>Отношение</span>
     </div>
</div>
<div class="content_box">
         <i></i>
         <span>Самосовершенствование</span>
</div>

и т.д.

Родительскому - position: relative
Дочерним - position: absolute и вертите их и переставляйте как вам надо

Внутри дочерних у вас идет иконка и текст. Делаете внутренности блочными элементами, выравнивайте по центру и они сами встанут куда надо

Comments

[Heorhii]

Благодарю. Попробую

[Mary Солнечная]

Приблизительная разметка, приблизительные стили, и решение тоже :)
https://jsfiddle.net/Lgstaqj6/

[Heorhii]

Mary Солнечная: Еще раз спасибо

Answer 2

[Hyubert]

Один с возможных вариантов решения, надеюсь пожжет.

Comments

[Heorhii]

То что нужно. Спасибо за помощь!

[Mary Солнечная]

Да, классно. Вы постарались сделать как надо)

Answer 3

[lem_prod]

если кроме кнопки "пройти тест", все остальное не кликабельное, то просто вставьте картинкой и не морочьте себе голову, а противном случае positon: absolute; и выставляйте...