List item: avatar with centered title

ionic-v1
1

Hello guys,

I have a small question: I want to display a list of avatars with centered text
something like

image

and I would also like the text to wrap around multiple line for responsive purposes.

The issue with the standard item-avatar and item-thumbnail classes is that they are designed for two lines title+description, which is not what I need here…

For now on I created a small subclass to center everything using flexbox:

.item-avatar-centered {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

but I wonder if there is a more “standard” way to achieve this layout ?

If anyone has insight on this, thx in advance :slight_smile:

2

Please have a look at the link


Is this is what you are expecting?

3

Thks for the reply :smile:

btw what you acheive in your example is horizontal centering, but what I am looking for is vertical centering…

4

Oh, may be you can try line height.

5

Any luck with this? I’m facing the same issue…

Would you mind sharing what you ended up doing?

6

line-height works for me

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

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

If the title is short, yes, this works perfect. Unfortunately, for titles using item-text-wrap, this doesn’t work.