Search code examples
cssvertical-alignmentright-align

CSS vertical align puzzle with float right and variable line height

I have a table where numbers are aligned to the right and texts can have more than 1 line.

http://jsbin.com/qelosicono/1/edit?html,css,output

The vertical-align:middle does not work with float:right unless I set the line-height which I can not set because some texts will wrap to multiple lines while other will stay single line so I don't know the line height upfront.

How do I vertically align the number to the middle of the text?

EDIT I am looking for solution that does not use tables - they behave too differently in too many cases to be fully substitutable for other elements.

Solution

  • I upgraded your code, works fine with any number of rows (without tables).

    http://jsbin.com/dufesexabu/1/edit?html,css,output