css – Ionic – 使用item-avatar类在item-list中垂直居中

我尝试将一个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可能对你有所帮助.

原文地址：https://www.jb51.cc/css/214565.html