Try to search your question here, if you can't find : Ask Any Question Now ?

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

HomeCategory: stackoverflowHow to fix the position of text inside of button among various items on CSS
Avatarbhawya asked 1 week ago

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 {
}
1 Answers
Best Answer
AvatarFernando answered 1 week ago
Your Answer

5 + 9 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com