How to vertically center a badge inside a list item?

ionic-v1
1

If a put a badge inside a list item, it’s positioned like so:

position: absolute;
top: 15px;
right: 15px;

which looks fine if the list item is just the “normal” height. But for taller, list items, it would look so much better if it was vertically centered.

How to do that? The icons and chevrons inside the list items are centered vertically within the list item, using flexbox and height:100%.

Being new to flexbox, I’m not sure if that can also be used to vertically center the badge?

Any ideas?

Cheers,
-adam

2

Totally posible, note that all the !important flags are just to override ionics settings.

3

Awesome, thanks.

I wasn’t using the <ion-list> directive, but just the list, item CSS classes.

I got it working by:

  • using your CSS
  • adding .item-content to my list items
  • wrapping my <h1> and other tags in a parent tag which applied flex-direction:column (so the contents of my list item would still stack vertically).
  • updating your CSS to remove !important from .badge{ display: inline !important; } (so ng-show would still work)

And now I have badges vertically centered within my list items. Great!

-adam