Vertically aligning text, non-standard situation

Question

I'm using a CSS counter and pseudo-elements to customize ordered list numbers - jsFiddle

What I'd like to achieve, is aligning a text vertically within a <li> element whenever it's a single line, otherwise keep it aligned to top as is.

Here's a preview of how I want it to look like - http://cl.ly/image/2f1U1p0k2M14

Any solutions (even involving JS/jQuery) would be much appreciated.

Answer 1

You have to use Javascript (jQuery) to check the height of each li element.

If its height is euqal to font-size * line-hight then add class "single-line"`, if it is greater then add class "multi-line".

In your CSS you can set the classes and their respective vertical-aling value.

Or for using a little less code, you make one the "default" and only add a class if it is different.

PS: Thanks to @Marc Audet's comment here is an addition.
If you use a min-height then you have to ensure that your font-size and line-height values are high enough so that a double line entry is at least 1px higher than the min-height value!

Answer 2

To be honest the design is rather inconsistent. There would be no way of telling without javascript and even this would only work onload. If the user increased the font size via the browser you would run into another bunch of problems as you can't detect when they do that.