html-尝试正确对齐文字和圆圈

(html - Trying to align text and circles correctly)

发布于 2020-12-08 16:51:19

想达到标准：

使文本在圆的左侧，垂直对齐；在文本的右侧（共线）圈出；圈子本身也将包含文本/数字。

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

以下是我目前拥有的代码：

#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>

如何对齐图片中的项目？

Questioner

Odins Code

Viewed

Original

English

.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>

html-尝试正确对齐文字和圆圈

(html - Trying to align text and circles correctly)

热门帖子

热门github