Ionic - 在项目列表中与项目化身类垂直地居中文本 [英] Ionic - Center text vertically in item-list with item-avatar class

问题描述

我尝试添加一个离子列表到我的apllication与项目构建像| Image | Text | Button

I try to add a Ion-List to my apllication with items build like |Image|Text|Button

图像和按钮垂直中心，

The Image and the Button get centerd vertically, but the text does not.

我试过在互联网上找到一个CCS，它在浏览器预览中工作正常，但不是在真实的设备上（三星Galaxy S3 Mini，Android 4.1.2 ）

I tried some CCS found on the Internet, which works fine in Browser preview but not on a real device (Samsung 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：

You can try to use this 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& / code>

and apply it to your <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 - 在项目列表中与项目化身类垂直地居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！