尝试正确对齐文本和圆圈

Question

试图达到标准：

将文本置于圆圈左侧，垂直对齐；与文本向右（内嵌）的圆圈；圈子本身也会有 text/numbers 里面。

我正在尝试为下图中的示例文本和带有数字的圆圈编写代码。但是，我无法弄清楚对齐方式：

下面是我目前的代码：

#feedbox-left {
  margin-left: 2vh;
  margin-top: 5vh;
  width: 19vw;
  height: 80vh;
  background: transparent;
  border: 1px solid black;
  border-radius: 1%;
}

.fb-hr {
  margin-top: 40vh;
  height: 0.15vh;
  background-color: hsla(0, 0%, 64%, 0.227);
}

.trackcircle {
  /* display: inline; */
  height: 60px;
  width: 60px;
  background-color: transparent;
  border: 1px solid black;
  border-radius: 50%;
  margin-top: 50%;
}

.trackcircle:first-child {
  margin-top: 40%;
}

.tracktext {
  display: flex;
  justify-content: space-evenly;
}

<section class="feedbox">
<div id="feedbox-left">
          <div></div>
          <hr class="fb-hr" />
          <div id="trackers">
            <div class="trackdiv">
              <p class="tracktext">Test <span class="trackcircle"></span></p>
            </div>
            <div class="trackdiv">
              <p class="tracktext">Test <span class="trackcircle"></span></p>
            </div>
            <div class="trackdiv">
              <p class="tracktext">Test <span class="trackcircle"></span></p>
            </div>
          </div>
          
         </section>

如何对齐图片中的项目？

Answer 1

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .circle {
        border-radius: 50%;
        width: 34px;
        height: 34px;
        padding: 10px;
        background: #fff;
        border: 3px solid #000;
        color: #000;
        text-align: center;
        font: 32px Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="circle">1</div>
  </body>
</html>

Answer 2

Output

.parent{
    border:2px solid #aaa;
    width: 400px;
    padding: 20px;
}
h1{text-align: center;text-decoration: underline;}
.row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.text{width: 80%;}
.circle{
    border:4px solid #aaa;
    width: 40px;
    text-align: center;
    height: 40px;
    border-radius: 50%;
    font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <div class="parent">
        <h1>Current tracks</h1>
        <div class="row">
            <div class="text">Lorem ipsum dolor sit amet </div>
            <div class="circle">1</div>
        </div>
        <div class="row">
            <div class="text">Second row and text here</div>
            <div class="circle">2</div>
        </div>
    </div>
</body>
</html>

尝试正确对齐文本和圆圈

Trying to align text and circles correctly

html

css

geometry

alignment

box