how properly to align 3 divs as circles in one line?

Question

Trying to make a legend like block and struggling with alignment, need some advice-correction:

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

so its looks almost ok, because I add

margin-right: 78px;

but such kind of "hardcoded" value and if size will change it will not fit well, so how I can change css so its looks same but be independent from margin? Also it seems not centred vertically. p.S. Yellow background has been added just to show boundaries of parent

Answer 1

The problem is "p" is outer the box model of "div class="circlemarker". Hope this my idea have solved your problem by delete tag "p" and the circle move to div:before

.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;
  padding: 1rem;
}

.circlemarker:before {
  content: "";
  position: absolute;
  left: 0;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

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

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

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

Answer 2

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

Try this.

Answer 3

1. Move the text outside the circlemarker to get the width of the flex items correct.
2. Make the footertext flex items be flexboxes themselves to get vertical centering.

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

.footertext > div {
  display: flex;
  align-items: center;
}


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

span {
  font-size: 12px;
  line-height: 14px;
}

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

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