Vertically align avatar text and badge

ionic-v1
1

Hi,
I was wondering what would be the best way to vertically align an image (on the left), some text and then a badge within a list item (assuming there will only be one line of text).
Using the item-avatar, or item-thumbnail the text seem to display at the top. I guess this is to make room for a paragraph underneath it.

I’m almost there. See this example -
http://play.ionic.io/app/dd6db60be8b1
or codepen -

As you can see, the badge isn’t centered.

  1. How can I vertically align the badge with the text and avatar image?
  2. The text wrapping doesn’t seem to work.

Thanks in advanced,
Safi

2

Hi SafiX, I know that this maybe is not anymore an issue but I just had to deal with this issue and solved overriding .badge style like this:

.badge {
  top: calc(50% - 11px) !important;
}

Best regards