这篇博客分享了一种仅使用CSS实现方形圆角元素的方法，通过设置min-width和min-height确保元素保持正方形，并利用伪元素实现内容的垂直居中。示例代码展示了如何创建带有红色背景和白色文字的圆形容器，适用于数字或其他需要居中显示的内容。
请参阅此仅CSS解决方案.为1位数设置相同的最小宽度和最小高度值.使用伪元素进行垂直对齐并保持方形. border-radius适用于圆的容器.
.circle {
display: inline-block;
border-radius: 50%;
min-width: 20px;
min-height: 20px;
padding: 5px;
background: red;
color: white;
text-align: center;
line-height: 1;
box-sizing: content-box;
white-space: nowrap;
}
.circle:before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
height: 0;
}
.circle span {
display: inline-block;
vertical-align: middle;
}
8
64
512
4096
扫一扫
1395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
