如何使用浮动按钮使div中的文本居中而不偏移文本？

Question

如何在 div 中将文本居中，同时让按钮向右浮动而不将文本推到左侧？

我们已经尝试过将其居中，但我们能想到的最好的结果是一个近似的相对百分比。这不能很好地扩展，但可以在我们典型的屏幕分辨率下工作。

<div>
  <span style="position: absolute; left: 43%;">Text</span>
  <button style="float:right">Button</button>
</div>

下图是我们希望看到的理想方式，我们希望有一种方法可以实现这一点，而无需使用像 43% 这样的奇怪百分比，因为屏幕越大，这种方式就不能完美地工作。

Answer 1

修复元素是个好方法，但一旦开始修复，就永远不会结束。相反，我强烈建议您了解一些有关flex-box的知识。

在你的例子中，我会将屏幕分成三部分，然后我可以容纳我需要的所有对象。当你开始使用时，它会比较复杂，但是一旦你习惯了使用 flex-box，你就会发现它很容易。

看看这个方法：

.container {
  display: flex;
  flex-direction: row;
}

.left-div, 
.right-div {
  display: flex;
  width: 20%;
  border: 1px solid black;
}

.right-div{
  justify-content: flex-end;
}

.center-div {
  display: flex;
  width: 60%;
  border: 1px solid black;
  justify-content: center;
}

.button {
  margin-right: 10%;
}

<div class="container">
  <div class="left-div"></div>
  <div class="center-div">
    <span>Text</span>  
  </div>
  <div class="right-div">
    <button class="button">Button</button>
  </div>
</div>