html - 如何正确地将 3 个 div 对齐为一行中的圆圈？

Question

尝试制作像块这样的传奇并努力对齐，需要一些建议纠正：

.footertext {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between;
  width: 260px;
  margin-top: 30px;
  background: yellow;
}

.circlemarker {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin-right: 78px;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.circlemarker p {
  padding-left: 20px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}

<div class="footertext">
  <div>
    <div class="circlemarker" id="accactive" ><p>Active</p></div>
  </div>
  <div>
    <div class="circlemarker" id="accdisabled"><p>Disabled</p></div>
  </div>
  <div>
    <div class="circlemarker" id="accprivileged"><p>Privileged</p></div>
  </div>
</div>

所以它看起来几乎没问题，因为我添加了

margin-right: 78px;

但是这种“硬编码”的值，如果大小会改变它就不适合了，那么我如何改变css使其看起来相同但独立于边距？而且它似乎没有垂直居中。pS 添加黄色背景只是为了显示父级的边界

标签： htmlcssflexbox

Answer 1

.footertext {
  width: 260px;
  margin-top: 30px;
  background: yellow;
  padding: 1rem;
}

.wrapper{
    display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  justify-content: space-between;
}

.circlemarker-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.circlemarker {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin-right: 0.5rem;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.circlemarker p {
  padding-left: 20px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}

<div class="footertext">
  <div class="wrapper">
    <div class="circlemarker-wrapper">
      <div class="circlemarker" id="accactive" ></div>
      Active
    </div>
 
   <div  class="circlemarker-wrapper">
        <div class="circlemarker" id="accdisabled"></div>
        Disabled
   </div>
   <div class="circlemarker-wrapper">
    <div class="circlemarker" id="accprivileged"></div>
    Privileged
   </div>
  </div>
</div>

试试这个。