Центрировать текст поверх гибкого элемента

Question

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

Я создал быструю и упрощенную версию моей текущей реализации:

.wrapper {
  display: flex;
}

.circle-wrapper {
  flex: 1;
}

.circle-wrapper.active>.circle {
  background-color: #3490DC;
  transform: scaleX(1.2) scaleY(1.2)
}

.circle-wrapper.complete>.circle {
  background-color: #38C172;
}

.circle {
  width: 34px;
  height: 34px;
  background-color: #B8C2CC;
  border-radius: 100%;
}

.label {
  margin-bottom: 10px;
}

.wrapper> :last-child {
  flex: none;
}

.line {
  height: 4px;
  width: 100%;
  background-color: #1F9D55;
  position: relative;
  bottom: 19px;
}

<div class="wrapper">
  <div class="circle-wrapper complete">
    <div class="label">Label 1</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper active">
    <div class="label">Label 2 with a longer name</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper">
    <div class="label">Label 3</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper">
    <div class="label">Label 4</div>
    <div class="circle"></div>
  </div>
</div>

Вы можете увидеть это здесь в этом коде

Пока все хорошо, но я хочу центрировать этикеткучерез кружок, не влияя на размер изгиба между каждым кружком, и я не могу это сделать.

Любой совет?

Answer 1

Если вы хотите центрировать его всегда над кругом, я бы использовал следующее: поместите метку внутри круга и используйте следующие свойства CSS:

.circle {
  position: relative;
  width: 34px;
  height: 34px;
  background-color: #B8C2CC;
  border-radius: 100%;
  margin: 50px 100px; /* remove this */
}

.circle .label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
}

<div class="circle">
  <div class="label">Small One</div>
</div>
<div class="circle">
  <div class="label">Very long label with long text</div>
</div>

Процентные значения left и bottom относятся к ширине родительского элемента, а процентное значение transform: translate относится к размеру элемента,Это позволяет вам расположить его в центре родительского элемента с помощью left: 50%, а затем снова переместить влево на половину ширины самого элемента.

Answer 2

Вы можете использовать left и transform, чтобы переместить его в центр:

.wrapper {
  display: flex;
}

.circle-wrapper {
  flex: 1;
  position:relative;
}

.circle-wrapper.active>.circle {
  background-color: #3490DC;
  transform: scaleX(1.2) scaleY(1.2)
}

.circle-wrapper.complete>.circle {
  background-color: #38C172;
}

.circle {
  width: 34px;
  height: 34px;
  background-color: #B8C2CC;
  border-radius: 100%;
}

.label {
  position:relative;
  left: 17px;                   /* move left 17px (half of circle width) */
  margin-bottom: 10px;
  transform: translateX(-50%);  /* move it backwards 50% of itself */
  text-align: center;           /* align text in centre */
}

.wrapper> :last-child {
  flex: none;
}

.line {
  height: 4px;
  width: 100%;
  background-color: #1F9D55;
  position: relative;
  bottom: 19px;
}

<div class="wrapper">
  <div class="circle-wrapper complete">
    <div class="label">Label 1</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper active">
    <div class="label">Label 2 with a longer name</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper">
    <div class="label">Label 3</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper">
    <div class="label">Label 4</div>
    <div class="circle"></div>
  </div>
</div>