Ionic spinner within button vertical alignment


I have tried to implement a spinner within a button but for some reason the spinner seems to be top aligned instead of vertically centered:

My code is the following:

<button type="submit" class="button button-block button-positive">
<ion-spinner class="spinner-energized"></ion-spinner> Click me!

See Codepen

Any idea why?


I edited your pen with some style

You just have to use inline-block, combined with vertical align : middle.
I set the height of the spinner so that he takes less space than the text in height.

Is that ok for you ?


Hi JC,

Thanks for your reply. Looking at your CodePen the spinner is now actually too low:

Of course I could adjust the spinner height until it works on my screen but this solution will not work since it would not automatically respond to individual screen sizes.

There should be more general solution, don’t you think?



Oh, I’m sorry this didn’t work, because I tried to resize my screen to see the behavior.
I’ll look into it later if no answer is given by someone else