Как вертикально центрировать текст в span-e с относительным размером и абсол. позицией?

Question

[LittleFatNinja]

https://jsfiddle.net/3tyg5qoL/1/

<div class="wrapper">
    <span>1</span>
</div>

необходимо эту еденичку по центру выставить

Comments

[Дмитрий]

Ты же уже спрашивал это...

Answer 1

[Евгений Петров]

Несомненно, line-height может быть равна 0.

Comments

[LittleFatNinja]

вот это поворот! незнал такого хака)
спасибо!

Answer 2

[Юлия Старченко]

Span по вертикали - с помощью transform: translate: https://jsfiddle.net/3tyg5qoL/3/
Текст в span с помощью line-height в em: https://jsfiddle.net/3tyg5qoL/4/

Comments

[LittleFatNinja]

нужно текст в span-е центровать, а не сам span

[Юлия Старченко]

а-а, тогда line-height

[LittleFatNinja]

Юлия Старченко: каким образом?)

[Юлия Старченко]

line-height задаете в зависимости от высоты span и размера шрифта элемента, например, проще всего, когда font-size равен 1em, тогда:
при height 35% line-height будет 3.5em, при 65% - 6.5em и т.д;

А вот когда font-size: не равен 1em, прийдется считать, например:
при height 35% и font-size: 1.5em >> 3.5/1.5 >> 2.33em

Но решение Евгения 100% лучше и более гибко!)

[LittleFatNinja]

Юлия Старченко: спасибо за пояснение!

Answer 3

[Elmechador]

Ну если элемент имеет абсолютную позицию, то только абсолютно и остается его центрировать использовать top, left, right, bottom в любой комбинации.

Comments

[LittleFatNinja]

нужно текст в span-е центровать, а не сам span

[Elmechador]

LittleFatNinja: Ну тогда просто паддинги использовать которые и увеличат размер объекта и отцентрируют его самого: https://jsfiddle.net/3tyg5qoL/8/