Текст в вертикальном центре <span>, который находится рядом с гораздо большим <span>, как внутри <div>

Я пытаюсь вертикально центрировать некоторый текст в элементе по отношению к гораздо большему , который является родным от первого. Оба являются дочерними элементами содержащего родительского элемента

.

HTML:

<div> <span>Preview:</span> <span>The quick brown fox jumps over the lazy dog.</span>
</div>

CSS

.previewLabel { display: inline-block; line-height: 100%; vertical-align: middle;
}
.previewText { font-family: Verdana, Geneva, sans-serif; font-size: 64px; font-style: italic; font-weight: bold;
}

JSFiddle: http://jsfiddle.net/5chXG/

Как вы можете видеть, я уже пробовал трюк vertical-alignline-height, определенный), описанный в этом Q & A ( "Текстовое выравнивание по вертикали в div" ), но, похоже, это не работает. Я считаю, что разница в том, что я не могу использовать статическое значение line-height.

Я не могу использовать значение px для свойства line-height, потому что диапазон .previewText может динамически изменять размеры. В реальном коде есть элементы управления на странице, чтобы изменить свойства шрифта, и JavaScript будет корректировать CSS .previewText, пока вы меняете вещи.

Мой вопрос:

Как сделать текст "Preview:" (.previewLabel) вертикальным выравниванием в середине родительского элемента

?

Изменить/уточнить

Я бы хотел, чтобы весь текст вел себя как одна строка текста.

  • Обтекание должно привести к тому, что большой текст будет течь под меньшим текстом.
  • Меньший текст должен быть только вертикально выровнен в пределах высоты одной строки большего текста, а не нескольких строк

Вот визуализация того, чего я пытаюсь достичь:

2 ответа

Добавление vertical-align:middle в оба .previewLabel и .previewText будет работать нормально.

И вот скрипка для доказательства: http://jsfiddle.net/pavloschris/5chXG/4/


Если вы хотите, чтобы левый однострочный текст выравнивался с первой строкой многострочного текста справа, вам нужно использовать vertical-align: baseline вместо vertical-align: middle вместе с display: table-cell. .previewLabel не требуется заданная длина строки.

DEMO

.previewLabel { vertical-align: baseline;
}
span { display:table-cell;
}

licensed under cc by-sa 3.0 with attribution.