It turns out that I want to center this button:
<div class="">
<button class="button button-block button-positive" ng-click="facebookLogin()" style="width:300px;">
<i class="icon ion-social-facebook"></i>
Continuar con facebook
</button>
</div>
and I tried several ways but I can not center it.
How could I center the button within div ?
I guess it will work in the same way as in normal CSS. You can use text-align: center for it. In this case I added div that includes a class centrado to give more context and that is relevant but you can put any name.
.centrado{
text-align: center;
}<div class="centrado">
<button class="button button-block button-positive" ng-click="facebookLogin()" style="width:300px;">
<i class="icon ion-social-facebook"></i>
Continuar con facebook
</button>
</div> Seeing that with the comments the problem was the class button-block I researched a bit about it and as it puts in the Ionic documentation when you indicate the class button-block to a button it takes the property display: block; , that is, it is considered as a block.
That's why with the property text-align: center the button was not centering, because the property text-align: center only affects elements inline or elements inline-block .
The button is a inline by default, and under normal conditions it should be enough using text-align: center in its container. However, as in this case we were telling him to behave like a block this property was not making any effect.
As you very well said, removing this property the button will be centered. Why? Because the button will return to its default state, in which it is considered as a inline element and therefore if it will affect the property text-align: center .