如何与Div一起垂直对齐文本？

Question

我已经使用HTML和CSS创建了一个圆形的多步骤进度UI，在这里，我需要在圆形图标下方添加一个文本，当我添加文本时，横穿条形的线路被向下移动。因为圆的高度根据内容长度增加。即使我们添加内容，如何始终在中心保持线路。

这是它的屏幕截图。

添加内容之前：

​

​“ rel =“ nofollow noreferrer”>

我面临CSS面临的挑战。如果您能帮助我解决这个问题，那就太好了。

这是工作 demo

。

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>
    </>
  );
}

​

@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;
}

​

​**

演示链接在发布的答案评论中添加

Answer 1

希望这是您要实现的目标：

这是我所做的：我使用了HR而不是::之前，但这并不重要，
在您的情况下，以前是.progress_container的中心哪个高度包括文本所占据的空间，而不是将其放在父级的中心，将其放在圆圈的中心，如<代码> top：calc（circle_height/2）

这是我的更改：

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;
}

*** .container的效果.container移动视图上的宽度***