尝试使用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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句