进度圈未与标签对齐 [英] Progress Circles Not Aligned With Label

问题描述

下面的代码创建了一个中间有数字的进度圈.

我需要每个圆圈下面都有一个标签，但不能在不破坏 CSS 圆圈的情况下将它放在 span 或 div 中；我用过桌子，但我希望它在移动设备上看起来不错.

任何建议都会很棒.

body {字体系列:'蒙特塞拉特'；}h1{颜色:#63B8FF；文本对齐:居中；}.progress-circle {位置:相对；显示:内联块；保证金:1rem；宽度:120px；高度:120px；边界半径:50%；背景颜色:#ebebeb；}.progress-circle:后{内容: '';显示:内联块；宽度:100%；高度:100%；边界半径:50%；-webkit-animation: colorload 2s;动画:colorload 2s；}.progress-circle span {字体大小:1rem；颜色:#8b8b8b；位置:绝对；左:50%；顶部:50%；显示:块；宽度:60px；高度:60px；行高:60px；左边距:-30px；边距顶部:-30px；文本对齐:居中；边界半径:50%；背景:#fff;z-索引:1；}.progress-circle span:after {字体粗细:600；颜色:#8b8b8b；}.progress-circle.progress-45:后{背景图像:线性渐变(90deg，#ebebeb 50%，透明 50%，透明)，线性渐变(90deg，#b4b5aa 50%，#ebebeb 50%，#ebebeb)；}}@-webkit-keyframes 颜色加载 {0% {不透明度:0；变换:旋转(0度)；}100% {不透明度:1；变换:旋转(360度)；}}

<div class="progress-circle progress-45"><span>333</span></div><center>TAG A</center><div class="progress-circle progress-45"><span>4444</span></div><center>TAG b</center><div class="progress-circle progress-45"><span>555</span></div><center>TAG C</center>

我尝试过使用表格，但在移动设备上效果不佳.

解决方案

检查了代码，好像它下面的标签不会破坏圆圈，即使你使用

或.您可以这样做:

使用容器来控制圆圈和标签的行为:

 
<div class="progress-circle progress-45"><span>333</span></div><div>标签A</div><div class="progress-circle progress-45"><span>4444</span></div><div>TAG b</div><div class="progress-circle progress-45"><span>555</span></div><div>TAG C</div>

通过这种方式，你可以控制圆形和标签在网页中的表现，你可以给 progressContainer 类一个 text-align: center; 使所有类中的代码居中(不使用 <center> 这是不好的做法)，如果您需要使它们全部左对齐，只需将其从 center 更改向左.我希望我正确理解了您的问题.

The below code creates a progress circle with number in the middle.

I need each circle to have a label under it, but can't put it in either a span or div without disrupting the CSS circle; I ussed tables but I want it to look okay on mobile devices.

Any suggestions would be great.

body {
  font-family: 'Montserrat';
}

h1 {
  color: #63B8FF;
  text-align: center;
}

.progress-circle {
  position: relative;
  display: inline-block;
  margin: 1rem;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #ebebeb;
}

.progress-circle:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: colorload 2s;
  animation: colorload 2s;
}

.progress-circle span {
  font-size: 1rem;
  color: #8b8b8b;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}

.progress-circle span:after {
  font-weight: 600;
  color: #8b8b8b;
}

.progress-circle.progress-45:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(90deg, #b4b5aa 50%, #ebebeb 50%, #ebebeb);
}


}
@-webkit-keyframes colorload {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}

<div class="progress-circle progress-45"><span>333</span></div>
<center>TAG A</center>
<div class="progress-circle progress-45"><span>4444</span></div>
<center>TAG b</center>
<div class="progress-circle progress-45"><span>555</span></div>
<center>TAG C</center>

I have tried to use tables but does not look great on mobile device.

解决方案

Checked the code, seems like the label under it doesn't ruin the circle, even if you use <div> or <span>. here is something you could do:

Use a container to control the behavior of the circles and the labels:

  <div class="progressContainer">
    <div class="progress-circle progress-45"><span>333</span></div>
    <div>Tag A</div>
    <div class="progress-circle progress-45"><span>4444</span></div>
    <div>TAG b</div>
    <div class="progress-circle progress-45"><span>555</span></div>
    <div>TAG C</div>
  </div>

This way, you can control how the circle and the label behave in the webpage, you can give the class progressContainer a text-align: center; to make all of the code inside the class be centered (without using <center> which is bad practice), if you need to make them all align left, just change it from center to left. I hope i understood your question correctly.

这篇关于进度圈未与标签对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！