Вертикального выравнивания текста, нестандартная ситуация

Question

я использую счетчик CSS и псевдо-элементы, чтобы настроить упорядоченный список чисел - jsFiddle

То, что я хотел бы достичь, является выравнивание текста по вертикали в пределах <li> элемент, когда это единственная строка, иначе поддерживайте ее в соответствии с верхним, как есть.

Вот предварительный просмотр того, как я хочу, чтобы это выглядело как - http://cl.ly/image/2f1U1p0k2M14

Любые решения (даже с участием JS/JQuery) были бы оценены.

Answer 1

Вы должны использовать Javascript (jQuery), чтобы проверить высоту каждыйli элемент.

Если его height является euqal до font-size * line-hight, тогда добавьте класс «single-line» `, если он больше, то добавьте класс« multi-line ».

В вашем CSS вы можете установить классы и их соответствующее значение вертикального выравнивания.

Или для использования кода меньше, вы делаете его «по умолчанию» и добавляете только класс, если он отличается.

PS: Благодаря комментарию @Marc Audet здесь добавление.
Если вы используете min-height, то вы должны убедиться, что ваши значения размера шрифта и высоты строки достаточно высоки, чтобы двустрочная запись была на 1px выше, чем значение min-height!

Answer 2

Чтобы быть честным, дизайн довольно несовместим. Невозможно было бы говорить без javascript, и даже это будет работать только при загрузке. Если пользователь увеличил размер шрифта с помощью браузера, вы столкнулись бы с еще одной проблемой, которую вы не сможете обнаружить, когда они это сделают.