尝试使用垂直居中文本创建圆形，并且存在圆形文本下
尝试使用垂直居中文本创建圆形，并且存在圆形文本下使用 Flexbox ，
但无法这样做，
- 我必须完全按照下面给出的图片做
我正在分享我的代码
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> 将 text-align:center 和 line-height 指定为与子类的高度相同：
<!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>