Geek Answers Handbook

Ionic - center text vertically in item list with item-avatar class

I am trying to add an Ion-List to my application with items like | Image | Text | Button

The image and button are centered vertically, but the text is missing.

I tried several CCS found on the Internet, which works fine in the browser, but not on the real device (Samsung Galaxy S3 Mini, Android 4.1.2)

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

code

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

On device

device screenshot

+6
source share
2 answers

You can try using 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%; }

and apply it to the <div>

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

and this is all the content:

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

This ionic game can help you.

+11
source

line-height works for me

 css: .item-text-center-vertical { line-height: 300%; } Inside avatar: <h2 class="item-text-center-vertical">{{value}}</h>
0
source

More articles:


All Articles