我尝试将一个Ion-List添加到我的应用程序中,项目构建如|
Image | Text | Button
图像和按钮垂直居中,但文本没有.
我尝试在互联网上找到一些CCS,它在浏览器预览中工作正常,但在真实设备上却没有(三星Galaxy S3 Mini,Android 4.1.2)
style =“position：absolute; top：50％; transform：translateY(-50％);”
码
<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>
在设备上
解决方法
你可以尝试使用这个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%;
}
并将其应用于您的< div>
<div class="item-text-center item-text-wrap">{{x.name}}</div>
这是整个内容：
<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可能对你有所帮助.
