Question

我正在尝试使用CSS构建自定义步进器，并且碰壁将标签居中放置在每一步的顶部。

我已经为当前的实现构建了一个快速且简化的版本：

.wrapper {
  display: flex;
}

.circle-wrapper {
  flex: 1;
}

.circle-wrapper.active>.circle {
  background-color: #3490DC;
  transform: scaleX(1.2) scaleY(1.2)
}

.circle-wrapper.complete>.circle {
  background-color: #38C172;
}

.circle {
  width: 34px;
  height: 34px;
  background-color: #B8C2CC;
  border-radius: 100%;
}

.label {
  margin-bottom: 10px;
}

.wrapper> :last-child {
  flex: none;
}

.line {
  height: 4px;
  width: 100%;
  background-color: #1F9D55;
  position: relative;
  bottom: 19px;
}

<div class="wrapper">
  <div class="circle-wrapper complete">
    <div class="label">Label 1</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper active">
    <div class="label">Label 2 with a longer name</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper">
    <div class="label">Label 3</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper">
    <div class="label">Label 4</div>
    <div class="circle"></div>
  </div>
</div>

You can see it here in this codepen

到目前为止，还不错，但是我想将标签放在圆div的中心，而又不影响每个圆之间的弯曲尺寸，所以我无法做到这一点。

有什么建议吗？

Answer 1

您可以使用left和transform将其移到中心：

.wrapper {
  display: flex;
}

.circle-wrapper {
  flex: 1;
  position:relative;
}

.circle-wrapper.active>.circle {
  background-color: #3490DC;
  transform: scaleX(1.2) scaleY(1.2)
}

.circle-wrapper.complete>.circle {
  background-color: #38C172;
}

.circle {
  width: 34px;
  height: 34px;
  background-color: #B8C2CC;
  border-radius: 100%;
}

.label {
  position:relative;
  left: 17px;                   /* move left 17px (half of circle width) */
  margin-bottom: 10px;
  transform: translateX(-50%);  /* move it backwards 50% of itself */
  text-align: center;           /* align text in centre */
}

.wrapper> :last-child {
  flex: none;
}

.line {
  height: 4px;
  width: 100%;
  background-color: #1F9D55;
  position: relative;
  bottom: 19px;
}

<div class="wrapper">
  <div class="circle-wrapper complete">
    <div class="label">Label 1</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper active">
    <div class="label">Label 2 with a longer name</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper">
    <div class="label">Label 3</div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
  <div class="circle-wrapper">
    <div class="label">Label 4</div>
    <div class="circle"></div>
  </div>
</div>

Answer 2

如果要始终将其居中放置在圆上方，则可以使用以下方法：将标签放在圆内，并使用以下CSS属性：

:let myEmptyList = the (List Integer) []

.circle {
  position: relative;
  width: 34px;
  height: 34px;
  background-color: #B8C2CC;
  border-radius: 100%;
  margin: 50px 100px; /* remove this */
}

.circle .label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
}

<div class="circle"> <div class="label">Small One</div> </div> <div class="circle"> <div class="label">Very long label with long text</div> </div>和left的百分比值引用父元素的宽度，bottom的百分比值引用元素的大小。这样，您可以使用transform: translate将其放置在父级的中心，然后将其再次向左移动元素本身宽度的一半。

将文字放在flex元素上

2 个答案: