Ion-list center align item text with item-note


#1

Hi all,

Just wondering if anyone knows how to vertically center a list item’s left text with a right aligned item-note that covers multiple lines?

Currently the item-note shows correctly over multiple lines on the right, but the item text on the left is top aligned but I would like it centered…

Check out my codepen to see what I’m talking about http://codepen.io/edd/pen/cHybp


#2

I’ve tried adding wrapping the elements in various parent container spans/divs and using vertical-align:middle; but can;t seem to get the left item vertically centered.

Anyone?


#3

I tried a few things but it seems that the multiline text caused a problem with most solutions. I ended up using the following

.elementCenterAlign {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

See updated CodePen http://codepen.io/edd/pen/cHybp