CODEWITHSUNDEEP
htmlcssvue.js
DD DD
DD DD

Reputation: 1238

How to fix the position of text inside of button among various items on CSS

I have this html on vuejs.

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

And this is my CSS file of the file above.
The fa-spin appears depends on "v-show".
But when the fa-spin appears, 'h1 - Order' text is moved to left to maintain center with 'fa-spin'.
But my goal is I want to fix the position 'h1 -Order' text on center and only 'fa-spin' is positioned at right side without moving 'h1-order' text.
Could you recommend some advice for this? Thank you so much for reading it. 

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

Upvotes: 0

Views: 131

Answers (1)

Prakash Rajotiya
Prakash Rajotiya

Reputation: 1033

hope this may help you.

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

Upvotes: 1

Related Questions