Я пытаюсь создать собственный степпер с помощью 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>

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

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

Любые советы?

1
SuperMarco 25 Сен 2018 в 16:33

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>
2
Pete 25 Сен 2018 в 13:56

Если вы хотите, чтобы он всегда располагался по центру над кругом, я бы использовал следующее: поместите метку внутри круга и используйте следующие свойства 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%, а затем снова переместить влево на половину ширины самого элемента.

1
ssc-hrep3 25 Сен 2018 в 13:42