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

Question

如何在div中居中文本并且还有一个向右浮动的按钮而不将文本推到左侧？

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下图片是我们希望看到的理想方式，我们希望有一种方法可以实现这一目标，而不会使用像43％这样的奇怪百分比，因为这不起作用屏幕越大越完美。

Answer 1

您可以随时按下absolute按钮，就像这样;

<div style="text-align:center; position:relative;">
  <span>Text</span>
  <button style="position:absolute; right:10px;">Button</button>
</div>

Answer 2

修复元素是一种好方法，但是一旦你开始修复，你永远不会结束。相反，我强烈建议您稍微了解flex-box。

在你的情况下，我将屏幕划分为3个部分，然后我可以容纳所有对象。当你开始使用它时会更复杂，但是一旦你习惯使用flex-box，你会发现它很容易。

看看这个方式：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您可以编辑html，可以试试这个：

.wrapper {
  position: absolute; 
  left: 50%;
}

.left {
  position: relative; 
  left: -50%;
}

.right {
  float:right;
}

<div>
  <div class="wrapper">
    <div class="left">Text</div>
  </div>
    
  <button class="right">Button</button>
</div>