How can I separate and center the buttons?


#1

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.

Buttons:

<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>
</ion-content>

Css:

page-home {

    .wallpaper {
        background-color: #25d298;
    }

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

}

How can I do that?


#2

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