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

Question

我在 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 {
}

Answer 1

希望对您有所帮助。

.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 */
}