Ionic spinner within button vertical alignment

ionic-v1
1

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:
image
My code is the following:

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

See Codepen

Any idea why?

2

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 ?

3

Hi JC,

Thanks for your reply. Looking at your CodePen the spinner is now actually too low:
image
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?

Thanks.

4

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