Metodo corretto per centrare gli elementi in ionic2

Question

Ho inserito del testo e un pulsante nella pagina. Mi sto concentrando centratamente usando metodi di css tradizionali che conosco. È questo il modo corretto di centrare in IONIC 2?

<ion-content padding class="login-signup"> 

    <ion-card> 

    <div class="or-label"> 
    SOME-TEXT 
    </div> 

    <div class="signup-button"> 
    <button outline>Signup</button> 
    </div> 

</ion-content> 

// corrispondente css

.or-label { 
    width: 20%; 
    font-size: 16px; 
    margin: 0 auto; 
    margin-top: 2em; 
    margin-bottom: 2em; 
    height: 50px; 
    text-align: center; 
    color: red; 
    } 


.signup-button { 
    text-align:center; 
} 

Answer 1

Aggiornamento

Proprio come @ AndrewGraham-Yooll menzionato nella sua risposta, l'attributo fab-center è stato rimosso un paio di versioni fa , quindi ora l'unico modo per farlo sarebbe quello di utilizzare un contenitore con il text-centerutility attribute

<ion-content padding class="login-signup"> 

    <ion-card text-center> 
    <div class="or-label"> 
     SOME-TEXT 
    </div> 
    <button outline>Signup</button> 
    </ion-card> 

</ion-content> 

---

È possibile centrare il button aggiungendo il Ionic2 attribuisconofab-center come questo:

<button fab-center outline>Signup</button>

è possibile trovare ulteriori informazioni su Ionic2 attributi in Ionic2 docs.

Per quanto riguarda l'altra div, perché non è un componente ionico (come un pulsante, o l'etichetta), si dovrebbe centrarlo utilizzando alcuni tradizionali css rules come si sta facendo o utilizzando un Utility attribute come text-center.

Si prega di notare, inoltre, che nel codice, v'è un tag clossing mancante: risposta </ion-card>

Answer 2

ionico 2 presenta alcuni utili Utility Attributes che può essere aggiunto a elementi.

In questo caso l'aggiunta di text-center a un elemento applicherà la proprietà text-align: center a esso, causando il centraggio del contenuto interno.

Un esempio utilizzando il codice sarebbe qualcosa di simile ...

<ion-card text-center> 
    <div class="or-label"> 
     SOME-TEXT 
    </div> 
    <button outline>Signup</button> 
</ion-card> 

Answer 3

@sebferras' non è più corretta per il rilascio è ionico 2> 2.0.0

È necessario racchiudere si pulsante in un div e applicare text-center.

<div text-center> 
    <button ion-button large> 
    Click Here 
    </button> 
</div>