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

user_1157772 0
Viewed 166

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

flexbox css html
3 Answers

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

user_160582440

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>

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

user_6810700
Related