2014-01-09 2 views
0

Я хочу центрировать текст по вертикали в элементе p с гибкой высотой (он может быть многострочным и иметь переменный размер шрифта). Поэтому я даю один и те же верхние и нижние отступы:вертикальное центрирование текста с переменным размером шрифта

padding: 4px 0; 

Но с большим размером шрифта он перемещается немного вниз, так что я должен установить больший отступ-дно:

.big{ 
    font-size: 100px; 
    padding-bottom: 14px; 
} 

Как сделать центры вертикальный для обоих случаев?
http://jsfiddle.net/uVsLn/1/

+1

Да, конечно, вы можете использовать% или em. -> padding: 0.4em 0; – chris

+1

На самом деле, оба текста по умолчанию имеют вертикальное центрирование. Просто попробуйте использовать буквы в верхнем регистре, и вы это увидите. Когда вы используете буквы нижнего регистра, такие как g, y, p, q, это похоже на это. Также, когда вы используете строчные буквы, такие как a, c, e, i, r, s, x, z, mv, u, m, n, o, он по-прежнему чувствует то же самое, что не распространяется, как b, h, F, d, K, L, т. Для решения вам нужно дать подкладку внизу вручную, как вы показали нам. – Morven

ответ

1

Как @DhirajShah упоминает в комментариях под вопрос OP, оба текста фактически вертикально по центру, по умолчанию, это просто, что браузеры, кажется, не принимать descenders (the bottom part of the g which extends to under the baseline) во внимание при оказании вертикально центрированный текст, который приводит в слово 'big' смотрит вне центра in your fiddle с удаленным дополнением.

Чтобы доказать это, вы должны взглянуть на this version of your fiddle, все, что я сделал, это удалить дополнительные прокладки на большом пункте размера, и изменил слово «маленький» к «большой». Теперь небольшая версия слова 'big' не выглядит вертикально по центру.

Это до вас, чтобы выбрать, если вы хотите, чтобы текст центрирован включая или за исключением нисходящих.

Если вы отцентрировать его по вертикали исключая подстрочных, просто удалите все добавляемые отступы в нижней части для всех пунктов, и вы сделали, так как это поведение по умолчанию. Теперь ваш текст не будет выглядеть вертикально по центру, если у него есть descenders.

Если вы действительно хотите, чтобы текст центрирован включая спусковые, вы, вероятно, лучше с добавлением что-то вроде padding-bottom: 0.1em; все пункты, это добавит немного дополнительных накладок под каждым пунктом. Блок em является лучшим выбором здесь as it ensures the size of the added padding varies based on the specified font-size. Недостатком этого подхода является то, что теперь ваш текст не будет выглядеть вертикально по центру, если у него нет десендеров (например, когда не используется g,y,p or q, с установленным uppercase или при использовании шрифта всех кепок).

Вот jsFiddle, демонстрирующий последний вариант.

Смежные вопросы