Trying to create circle with Vertically-Centered Text and Under circle text exist

Question

Trying to create circle with Vertically-Centered Text and Under circle text exist Using Flexbox ,

BUT UNABLE TO DO SO,

I have to do exactly like Image given Below

I am sharing my code

https://stackblitz.com/edit/angular-rzyhff?file=src%2Fapp%2Fapp.component.html

.flex-container {
  display: flex;
  background-color: #DDD8D8;
    justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  height: 25px;
  width: 25px;
  padding: 29px;
  margin: 17px;
  border-radius: 50%
}

<div class="flex-container">
    <div style='background-color: #30D829;'>1</div>
    <div style='background-color: #72A7E5;'>2</div>
    <div style='background-color: #F0CD09;'>3</div>  
    <div style='background-color: #A552ED;'>2</div>
    <div style='background-color: #EF4E92;'>3</div>  
  </div>

Pushprajsinh Chudasama · Accepted Answer · 2020-01-04T07:55:25.743

Give text-align:center and line-height same as your height to child class:

   <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .flex-container {
    display: flex;
    background-color: #DDD8D8;
    justify-content: center;
    height: 160px;
  }
  .flex-container > div{
    background-color: #f1f1f1;
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    padding: 29px;
    margin: 17px;
    border-radius: 50%;
  }
  p {
   display: flex;
   justify-content: center;
   margin-top: 35px;
   line-height: 18px;
   font-weight: 600;
 }
</style>
</head>
<body>
  <div class="flex-container">
    <div style='background-color: #30D829;'>1 <p>Active</p></div>
    <div style='background-color: #72A7E5;'>2 <p>pending Approvals</p></div>
    <div style='background-color: #F0CD09;'>3 <p>pending Approvals</p></div>
    <div style='background-color: #A552ED;'>2 <p>pending Approvals</p></div>
    <div style='background-color: #EF4E92;'>3 <p>pending Approvals</p></div>
  </div>
</body>
</html>

Problem in I have to write Text Under the Circle , eg. Active , Pending Approval etc . .. You can See in the Image I have posted — Anurag Ranjan, Jan 04 '20 at 07:52

Viral · Answer 2 · 2020-01-04T09:33:54.833

You just need to add display: flex;align-items: center; justify-content: center; to your children divs.

Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as "flex container") whereas the others are meant to be set on the children (said "flex items").

You can learn more about the flexbox layout from the below link.

https://www.w3schools.com/css/css3_flexbox.asp

.flex-container {
  display: flex;
  background-color: #DDD8D8;
  justify-content: center; 
  padding-bottom: 45px;
}
.flex-container > div {
  background-color: #f1f1f1;
  height: 25px;
  width: 25px;
  padding: 29px;
  margin: 17px;
  line-height: 25px;
  border-radius: 50%;
  display: flex;
  color: white;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.flex-container > div p {
  display: block;
  margin-top: 40px;
  color: #000;
  line-height: normal;
  text-align: center;
}

<div class="flex-container">
  <div style='background-color: #30D829;'>
    <span>1</span>
    <p>Active</p>
  </div>
  <div style='background-color: #72A7E5;'>
    <span>2</span>
    <p>Pending Approval</p>
  </div>
  <div style='background-color: #F0CD09;'>
    <span>3</span>
    <p>Pending Approval</p>
  </div>  
  <div style='background-color: #A552ED;'>
    <span>4</span>
    <p>Pending Approval</p>
  </div>
  <div style='background-color: #EF4E92;'>
    <span>5</span>
    <p>Pending Approval</p>
  </div>  
</div>

I hope this helps.

Problem in I have to write Text Under the Circle , eg. Active , Pending Approval etc . .. You can See in the Image I have posted — Anurag Ranjan, Jan 04 '20 at 07:30

Trying to create circle with Vertically-Centered Text and Under circle text exist

2 Answers2