Размещение иконок по центру с заданным интервалом

Question

Требуется разместить иконки как на скрине

Расстояние между иконками 12px, справа и слева от обозначенных границ одинаковое расстояние

Пытался сделать через justify-content: space-evenly/space-around, но тогда если количество иконок будет 3, то расстояние между ними будет НЕ 12px

Догадываюсь, что нужно решать через псевдо-элементы или тп., но пока что даже не знаю с чего начать

Answer 1

Для современных браузеров:

p {
  display: flex;
  gap: 12px;
  justify-content: center;
  outline: 1px dotted red;
}

i {
  width: 32px;
  height: 32px;
  background: silver;
  border-radius: 50%;
}

<p><i></i>
<p><i></i><i></i>
<p><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i><i></i>

Чуть постарее:

p {
  display: flex;
  justify-content: center;
  outline: 1px dotted red;
}

i {
  width: 32px;
  height: 32px;
  background: silver;
  border-radius: 50%;
}

i + i {
  margin-left: 12px;
}

<p><i></i>
<p><i></i><i></i>
<p><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i><i></i>

Совсем старых:

p {
  text-align: center;
  outline: 1px dotted red;
}

i {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  background: silver;
  border-radius: 50%;
}

i + i {
  margin-left: 12px;
}

<p><i></i>
<p><i></i><i></i>
<p><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i><i></i>

БЛОГ НА HUSL

Размещение иконок по центру с заданным интервалом

Ответы (1 шт):