Center text over a flex element - css

Question

I am trying to build a custom stepper with CSS and I am hitting a wall to center the label on top of each step.
I've build a quick and simplified version of my current implementation :
.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>
You can see it here in this codepen
So far so good, but I want to center the label over the circle div without impacting the flex size between each circle and I can't manage to do it.
Any advice ?

Answer 1

You can use a left and a transform to move it into the centre:
.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>

Answer 2

If you want to center it always above the circle, I would use the following: put the label inside the circle and use the following CSS properties:
.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>
The percentage values of left and bottom reference to the width of the parent element and the percentage value of transform: translate references to the element's size. This allows you to position it in the center of the parent with left: 50% and then moving it to the left again by the half of the width of the element itself.