html - 对齐步骤进度条的两个 div 和 hr 标签

Question

我有以下进度条

1. 我希望“已创建”、“已分配”div 在圆圈下方并同时居中，“hr”线应与圆圈接触。应该适用于不同的屏幕尺寸
2. 如何在这里画出完美的圆？

HTML

<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div> 

CSS

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
 height: 25px;
 width: 25px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}

提前致谢:)

Answer 1

为了制作更好的圆圈，您可以使用 Padding

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
 align-items:center
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
padding:15px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}

<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div> 

只需在您的 CSS 文件中使用 align-items: center并使用填充代替宽度和高度

.progress {
   display: flex;
   align-items: center;
}

    .filledCircle {
      padding: 15px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
    }