İyonik Ben öğeler gibi inşa benim doygun hale bir İyon List eklemeyi deneyin

Question

madde-avatar sınıfıyla öğe listesindeki dikey Merkezi metni ama metin yok.

Bazı CCS değil gerçek bir aygıtta (Samsung Galaxy S3 Mini, Android 4.1.2) Tarayıcı önizleme çalışıyor Internet, üzerinde bulunan denedik

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

Kod

Cihazda

<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> 

Answer 1

Bu css kullanmayı deneyebilirsiniz:

.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%; 
} 

ve <div>

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

uygulamak ve bu bütün içeriği:

<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> 

Bu ionic play size yardımcı olabilir.

Answer 2

line-height bana

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

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