CODEWITHSUNDEEP
htmlcsspug
user137717
user137717

Reputation: 2165

center a spinner in a button

I am trying to center a spinner in a button. The spinner will appear while the system is getting a response. I have changed margins and padding and the changes show when I inspect element, but it just adds margin and padding to the bottom without moving the spinner further up within the button.

Here is my Jade:

div.form-group
    div.col-sm-4
        button.form-control.btn.btn-success.strong-button(type='submit' ng-model='pressed' ng-disabled="pressed") Delete
            spinner(ng-show="submitDelete")

The css for spinner is 

.font-awesome-spinner{
    width: 100%;
    text-align: center;
}

The spinner element creates a div inside the button element that looks like (taken from page source)

<button (all the stuff here)>
     <div class="font-awesome-spinner ng-isolate-scope" ng-show="submitDelete">
          <i class="fa fa-circle-o-notch fa-spin"
               ::before
          </i>
     </div>
</button>

Upvotes: 0

Views: 3698

Answers (1)

Ole Spaarmann
Ole Spaarmann

Reputation: 16749

You cannot center a block element like a DIV with text-align: center; Set the width of your spinner div and then add margin: auto; to the spinner div.

Also your HTML is malformed. Check (all the stuff here) in your button element.

<!DOCTYPE html>
<head>
  <style type="text/css">
    #button_element {
      width: 100px;
    }
    #button_element .font-awesome-spinner {
      width: 50px;
      margin: auto;
    }
  </stlye>
</head>
<body>
  <button id="button_element">
    <div class="font-awesome-spinner ng-isolate-scope" ng-show="submitDelete">
      <i class="fa fa-circle-o-notch fa-spin"></i>
    </div>
  </button>
</body>
</html>

Upvotes: 1

Related Questions