html - 如何在CSS上的各个元素之间固定按钮内文本的位置

我在vuejs上有这个html。

 <div class="confirm-button">
    <button v-on:click="placeOrder" v-bind:disabled="!buttonEnabled">
      <h1>Order</h1>
      <i class="far fa-spinner fa-spin" v-show="!placeOrderLoading"></i>
    </button>
 </div>

这是我上面文件的CSS文件。
fa-spin的出现取决于“ v-show”。
但是，当fa-spin出现时，“ h1-Order”文本将向左移动以保持“ fa-spin”的中心。
但是我的目标是我想将“ h1-order”文本固定在中心位置，并且仅“ fa-spin”位于右侧，而不移动“ h1-order”文本。
您能为此建议一些建议吗？
非常感谢您阅读它。

.confirm-button button {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
}
.confirm-button h1 {
  display: inline;
  font-size: 18px;
}
.confirm-button .fa-spin {
}

最佳答案

希望对您有帮助。

.confirm-button button {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  position: relative; /* new added*/
}
.confirm-button h1 {
  display: inline;
  font-size: 18px;
}
.confirm-button .fa-spin {
  position: absolute; /* new added*/
  right: 15px; /* new added */
}

关于html - 如何在CSS上的各个元素之间固定按钮内文本的位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58263594/