List item: avatar with centered title

Hello guys,

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


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:

Please have a look at the link

Is this is what you are expecting?

Thks for the reply :smile:

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

Oh, may be you can try line height.

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

Would you mind sharing what you ended up doing?

line-height works for me

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

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

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