Ionic - Trung tâm văn bản theo chiều dọc trong mục danh sách với lớp item-avatar

Question

tôi cố gắng thêm một Ion-List để apllication của tôi với mục xây dựng như | Hình ảnh | bản | Nút

Các hình ảnh và các nút được centerd theo chiều dọc , nhưng văn bản thì không.

Tôi đã thử một số CCS tìm thấy trên Internet, trong đó hoạt động tốt trong preview trình duyệt nhưng không phải trên một thiết bị thực (Samsung Galaxy S3 Mini, Android 4.1.2)

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

Mã

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

Trên thiết bị

Answer 1

Bạn có thể cố gắng sử dụng css này:

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

và áp dụng nó cho bạn <div>

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

và đây là toàn bộ nội dung:

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

ionic play này có thể giúp bạn.

Answer 2

line-height làm việc cho tôi

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

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