时间戳

首页 > 解决方案 > 进度圈未与标签对齐

html - 进度圈未与标签对齐

问题描述

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

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

任何建议都会很棒。

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>

我曾尝试使用表格，但在移动设备上看起来不太好。

标签： htmlcss

解决方案

检查代码，似乎它下面的标签不会破坏圆圈，即使你使用<div>or <span>。这是您可以做的事情：

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

  <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>

这样，您可以控制圆形和标签在网页中的行为方式，您可以给类progressContaineratext-align: center;以使类中的所有代码居中（不使用<center>which 是不好的做法），如果您需要全部制作它们左对齐，只需将其从 更改center为left。我希望我正确理解了你的问题。

推荐阅读