ionico - Centro verticalmente il testo in voce-list con voce-avatar di classe

Question

provo ad aggiungere un Ion-List per la mia apllication con gli oggetti che costruiscono come | Immagine | Testo | Button

L'immagine e il pulsante Get centerd verticale , ma il testo no.

Ho provato alcuni CCS trovati su Internet, che funziona bene in anteprima del browser, ma non su un dispositivo reale (Samsung Galaxy S3 mini, 4.1.2 Android)

style="position: absolute; top: 50%; transform: translateY(-50%);"

Codice

<ion-content> 
     <ion-list> 
     <ion-item class="item-avatar item-icon-right" collection-repeat="x in y" href="#/pages/{{x.id}}"> 
     <img src="img/{{x.icon}}.png"> 
     <div style="position: absolute; top: 50%; transform: translateY(-50%);">{{x.name}}</div> 
     <i class="icon ion-chevron-right icon-accessory"></i> 
     </ion-item> 
     </ion-list> 
    </ion-content> 

Sul dispositivo

Answer 1

Si può cercare di utilizzare questo css:

.item-text-center 
{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    align-items: center; 
    position: absolute; 
    top: 0; 
    height: 100%; 
} 

e applicarlo al vostro <div>

<div class="item-text-center item-text-wrap">{{x.name}}</div> 

e questo è tutto il contenuto:

<ion-content class="padding"> 
    <ion-list> 
     <ion-item class="item-thumbnail-left item-icon-right" collection-repeat="x in y"> 
     <img src="img/{{x.icon}}.png"> 
     <div class="item-text-center item-text-wrap">{{x.name}}</div> 
     <i class="icon ion-chevron-right icon-accessory"></i> 
     </ion-item> 
    </ion-list> 
    </ion-content> 

Questo ionic play potrebbe aiutarti.

Answer 2

line-height funziona per me

css: 
.item-text-center-vertical { 
    line-height: 300%; 
} 

Inside avatar: 
<h2 class="item-text-center-vertical">{{value}}</h>