技术求助：如何将圆形沿单行居中对齐，文本与紫色线条交替上下分布

嘿，这就给你搞定这个需求！咱们可以用HTML + CSS轻松实现，核心思路是用Flex布局让整个行居中，再通过绝对定位和伪类选择器来控制文本与紫色线条的上下交替。

实现代码 #

HTML 结构

<div class="container">
  <div class="item">
    <div class="circle"></div>
    <span class="text">文本1</span>
    <div class="line"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
    <span class="text">文本2</span>
    <div class="line"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
    <span class="text">文本3</span>
    <div class="line"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
    <span class="text">文本4</span>
    <div class="line"></div>
  </div>
</div>

CSS 样式

/* 容器：让所有元素单行居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* 控制圆形之间的间距 */
  padding: 40px 0;
}

/* 每个项目：相对定位，用来承载绝对定位的文本和线条 */
.item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 圆形样式 */
.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #333; /* 你可以换成自己想要的颜色 */
}

/* 文本和线条的基础样式 */
.text, .line {
  position: absolute;
  width: 100%;
  text-align: center;
}

/* 默认状态：文本在顶部，线条在底部 */
.text {
  top: -25px; /* 调整距离圆形的间距 */
  font-size: 14px;
}

.line {
  bottom: -25px;
  height: 2px;
  background: #9370DB; /* 紫色线条 */
}

/* 偶数项：交换文本和线条的位置 */
.item:nth-child(even) .text {
  top: auto;
  bottom: -25px;
}

.item:nth-child(even) .line {
  bottom: auto;
  top: -25px;
}

关键知识点解析 #

• Flex布局：.container用display: flex + justify-content: center实现整个行的水平居中，align-items: center让垂直方向也居中，gap控制圆形之间的间距。
• 绝对定位：.text和.line用position: absolute脱离文档流，相对于父元素.item定位，实现上下排列。
• 伪类选择器：nth-child(even)选中偶数项，交换文本和线条的top/bottom值，实现交替效果。
• 圆形实现：通过border-radius: 50%把正方形变成圆形，调整宽高就能改变大小。

你可以根据需求调整圆形大小、间距、颜色这些参数，完全适配你的设计！

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