尝试为用户制作一个3步程序

Question

我正在尝试获得具有相同宽度和高度的响应式圆圈，并且我还希望水平线位于中心。 并且数字也将集中在圆的中间，有人知道我如何改变它来实现这一点吗？

.DCQ_Container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.Progress_Bar {
  display: flex;
  justify-content: center;
  border: 3px solid royalblue;
  align-items: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  text-align: center;
}

.HR_line {
  border: 2px solid grey;
  flex-grow: 0.1;
  margin: 0;
}

<div class="DCQ_Container">
  <h1 class="Steps_Head"> DCQ Step 1 / 3 </h1>
  <div class="Progress_Bar">
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>1</p>
      </div>
      <p>User Name</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>2</p>
      </div>
      <p>Location</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>3</p>
      </div>
      <p>Buisnesss</p>
    </div>
  </div>
</div>

Answer 1

您可以将标题从弹性流程中取出：

.Circle_Text_Container {
  position: relative; /* Creates context for absolute in children */
}

.Circle_Text_Container > p {
  position: absolute; /* Relative to last element with postition set to relative */
  top: 100%; /* Distance from top */
}

这使得伸缩尺寸等于圆的高度。

要将文本置于圆圈中心，您还可以使用 flex:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

顺便说一句，有多种方法可以使 div 中的内容居中。太多了，以至于它变成了一个模因。 这里是关于这个问题的StackOverflow问题。

最终效果是这样的：

.DCQ_Container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.Progress_Bar {
  display: flex;
  justify-content: center;
  border: 3px solid royalblue;
  align-items: center;
}

.Circle_Text_Container {
  position: relative; /* Creates context for absolute in children */
}

.Circle_Text_Container > p {
  position: absolute; /* Relative to last element with postition set to 
relative */
  top: 100%; /* Distance from top */
  left: 0;
  right: 0;
  text-align: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

.HR_line {
  border: 2px solid grey;
  flex-grow: 0.1;
  margin: 0;
}

<div class="DCQ_Container">
  <h1 class="Steps_Head"> DCQ Step 1 / 3 </h1>
  <div class="Progress_Bar">
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>1</p>
      </div>
      <p>User Name</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>2</p>
      </div>
      <p>Location</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>3</p>
      </div>
      <p>Buisnesss</p>
    </div>
  </div>
</div>