how to align the text vertically along with the div?

Question

I have created a circular multi-step progress UI with HTML and CSS, here I need to add a text underneath the circular icon, When I have added the text, the line which crosses the bar is moved down. Because the height of the circle is increasing based on the content length. How to make the line always at the center even when we are adding content.

here is the screenshot of it.

Before adding the content:

After adding the content:

I am facing challenges with the CSS. It would be great if u could help me with this issue.

Here is the working demo

App.js

import CheckIcon from "@mui/icons-material/Check";
import "./styles.css";

export default function App() {
  const steps = [1, 2, 3, 4, 5];
  return (
    <>
      <div class="container">
        <div class="progress-container">
          <div class="progress" id="progress"></div>
          {steps.map((val) => (
            <div>
              <div className={`circle ${val === 4 ? "active" : ""}`}>
                {val === 4 ? <CheckIcon sx={{ fontSize: "3rem" }} /> : null}
              </div>
              <div className="test">
                {val % 2 === 0
                  ? "Conservative"
                  : "Somewhat Conservative but it is okay"}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

style.css:

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 100%;
  width: 700px;
}

.progress-container::before {
  content: "";
  background-color: #767676;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
}

.progress {
  /* background-color: var(--line-border-fill); */
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
}

.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 85px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #767676;
  transition: 0.4s ease;
  cursor: pointer;
  font-size: 20px;
}

.circle.active {
  border-color: #3769ff;
  background-color: #3769ff;
  color: #ffffff;
}

.test {
  max-width: 85px;
}

Results

** <hr/> tag length is reduced when minimizing the screen size.**

Demo link is added in the posted answer comment

Answer 1

hope this is what you aim to achieve :

this is what i did : i used hr instead of ::before but it doesnt matter, in your case the before is at the center of .progress_container which height includes the space occupied by the text so instead of putting it at the center of the parent put it at the center of the circles like this top:calc(circle_height / 2 )

here are my changes:

import CheckIcon from "@mui/icons-material/Check";
import "./styles.css";

export default function App() {
  const steps = [1, 2, 3, 4, 5];
  return (
    <>
      <div class="container">
        <div class="progress-container">
          <hr/>
         
          {steps.map((val) => (
            <div>
              <div className={`circle ${val === 4 ? "active" : ""}`}>
                {val === 4 ? <CheckIcon sx={{ fontSize: "3rem" }} /> : null}
              </div>
              <div className="test">
                {val % 2 === 0
                  ? "Conservative"
                  : "Somewhat Conservative but it is okay"}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

css

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;

  position: relative;
  max-width: 100%;
  width: 700px;
}

hr{
  position:absolute;
  height: 4px;
  width: 90%;
  background: #000;
  top: calc(85px / 2);
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);

}

.progress {
  /* background-color: var(--line-border-fill); */
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}

.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 85px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #767676;
  transition: 0.4s ease;
  cursor: pointer;
  font-size: 20px;
}

.circle.active {
  border-color: #3769ff;
  background-color: #3769ff;
  color: #ffffff;
}

.test {
  max-width: 85px;
}

*** effect of the .container width on mobile view ***