同一行中带有按钮的中心标题

Question

我想创建一个CENTERED标头，右边的按钮。
我已经有这样的东西：

h1{
  text-align : center;
  margin-right : 32px;
}

button{
  position: absolute;
  top: 32px;
  right: 32px;
}

<html>
<body>
<div><h1>test</h1><button style="float: right;">test</button></div>
<div style="text-align: center;">text</div>
</body>
</html>

但在这种情况下，标头未居中于全角页面。
另外，如果标题太长，则不应覆盖按钮。

感谢您的阅读！

Answer 1

如果flexbox是选项，则可以将居中h1并将其定位button在右侧：

div {
  display: flex;
  justify-content: center;
  position: relative;
}
h1 {
  text-align: center;
}
button {
  position: absolute;
  right: 0;
}

<div>
  <h1>test</h1>
  <button>test</button>
</div>

干杯!