如何用CSS将.final_time_text左移并对齐.final_time容器中心？

问题原因 #

.final_time_text 是默认的静态（static）定位元素，left 属性仅对非静态定位（如 relative、absolute）的元素生效，所以你设置的 left: -20px 不会起作用。

解决方案 #

给文本元素添加定位属性，再调整偏移量实现居中对齐，同时补充垂直居中样式让效果更完整：

修改后的CSS代码：

.final_time {
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  right: 15%;
  top: 50%;
  margin-top: -10px; /* 改为自身高度的一半，让圆形容器垂直居中 */
}
.final_time_text {
  width: 200px;
  position: relative; /* 添加相对定位，激活left属性 */
  left: -90px; /* 文本宽度200px的一半是100px，减去圆形容器一半宽度10px，实现中心对齐 */
  top: 50%;
  transform: translateY(-50%); /* 实现文本垂直居中 */
  margin: 0; /* 清除p元素默认边距 */
}

代码说明 #

• 调整 .final_time 的 margin-top 为 -10px，让圆形容器自身垂直方向居中。
• 给 .final_time_text 设置 position: relative，才能让 left 属性生效。
• left: -90px 是根据文本和容器的宽度计算得出，确保文本中心与圆形容器中心对齐。
• transform: translateY(-50%) 配合 top:50%，让文本在垂直方向与圆形容器居中对齐。
• 清除p元素默认的边距，避免多余间距干扰布局。

内容的提问来源于stack exchange，提问作者Brian