如何将文本与 div 垂直对齐？

Question

我创建了一个带有 HTML 和 CSS 的圆形多步进度 UI，在这里我需要在圆形图标下方添加一个文本，当我添加了文本时，穿过栏的线向下移动。 因为圆圈的高度随着内容长度的增加而增加。 即使我们添加内容，如何使线条始终位于中心。

这是它的屏幕截图。

添加内容前：

添加内容后：

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

这是工作演示

应用程序.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>
    </>
  );
}

样式.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;
}

结果

** 当屏幕尺寸最小化时， <hr/>标签长度会减少。**

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

Answer 1

希望这是您的目标：

这就是我所做的：我使用 hr 而不是 ::before 但没关系，在您的情况下，之前位于.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宽度对移动视图的影响 ***