如何使用附近的动态宽度按钮将字幕居中？

Question

我有一个绿色的标题部分，其中有两个对象：标题和按钮。我需要使标题相对于绿色部分居中，但是它应该对按钮宽度增长做出反应，并保持位置尽可能靠近中心，而不会彼此重叠。 整个文本应该是可见的。 该按钮可能不存在（* ngIf）。 字幕文本也可以不同。

您可以更改html结构。仅限于CSS / SASS。

在jsfiddle中查看我为解决该问题所做的尝试！

<div class="wrapper">
  <h1 class='title'>
    <span class='title-text'>
      Caption
    </span>
  </h1>

  <button>
    dynamic width
  </button>
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
  background: green;
  padding: 10px;
}

h1 {
  margin: 0 auto;
  height: 40px;
}

Answer 1

您应该将包装器设置为

position：相对； 证明内容：中心；

然后完全定位按钮

position：绝对； 右：10像素；

只需将right的值更改为所需的结果即可。