CSS 中按钮下方任意大小的中心标签

Question

我有一个标签完全位于下方的按钮。

我希望标签不换行而是全部呈现在一行上。我知道我可以使用 width: max-content 或 overflow: visible.

但同时我希望标签以按钮为中心，这是我无法找到的方法，除非我将标签换行。

我有什么办法可以做到这一点？

button {
    position: relative;
    width: 40px;
    height: 40px;
    background: #E30202;
    color: black;
    border-radius: 14px;
}

span {
  position: absolute;
  top: calc(45px);
  left: 0;
  font-size: 12px;
  color: black;
  width: 100%;
  pointer-events: none;
  /* width: max-content; */
}

<button>
  
  <span>Label Line</span>
</button>

Answer 1

所以你的文字是居中的。容器中的宽度不足以让文本仅落在一行上。您可以使用 psuedo-element :after 添加居中文本。但是您会注意到代码片段中的示例 1 似乎仍然没有居中。 button 的 width 在第二个示例中翻了一番，显示居中文本的样式相同。

另一种解决方案是添加 .wrapper 并将 display: flex; 与 flex-flow: column; 和 justify-content: center; 一起使用，以确保文本始终以按钮为中心。

button {
  position: relative;
  width: 40px;
  height: 40px;
  background: #E30202;
  color: black;
  border-radius: 14px;
  margin: auto;
}

button.pseudo:after {
  content: "Label Line";
  position: relative;
  top: calc(100% + 3px);
}

.btn-wrapper:nth-child(2)>button {
  width: 80px;
}

.btn-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 3em;
}

<!-- example 1 -->
<div class="btn-wrapper">
  <button class="pseudo">
 
</button>
</div>

<!-- example 2 -->
<div class="btn-wrapper">
  <button class="pseudo">
 
</button>
</div>

<!-- example 3 -->
<div class="btn-wrapper">
  <button>btn</button>
  <span>Label Line</span>
</div>

CSS 中按钮下方任意大小的中心标签

Center label of any size under a button in CSS

css

position