How can I separate and center the buttons?


I want to leave the buttons one underneath the other and center them, but I do not know how to do that. Currently they are side-by-side and are not centralized.


<ion-content class="wallpaper">
    <img src="assets/img/logo.png"/>
    <button ion-button round class="button">Acessar</button>
    <button ion-button round class="button">Tutorial</button>
    <button ion-button round class="button">Sobre</button>


page-home {

    .wallpaper {
        background-color: #25d298;

    .button {
        background-color: #d24125;
        text-align: center;
        margin: 20;


How can I do that?


Just wrap the buttons into a div and to the div set style: text-align: center;
It works fine for me. :slight_smile: