Вертикальное выравнивание текста в html

24 Фев 2011, рубрика: Верстка |


Иногда, возникает необходимость применить вертикальное выравнивание текста в html. О том, как это сделать, плюс чтобы результат был кросс-браузерным я расскажу в этом посте.

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

Первый способ  — использование em.

Как известно, “em” это масштабируемая единица, которая равно текущему значению размера шрифта. Помня, это, создаем такой css код для элемента, где будет вертикальный текст.

.someBlock{
width: 1em;
font-size: 14px;
letter-spacing: 40px; /* для безопасности */
}

Теперь текст в любом элемент, отформатированном этим стилем будет отображаться вертикально.

Второй способ – использование whitespace.

Сss код:

.someBlock{
white-space: pre;
}

Устанавливая  значение white-space в pre мы добились того же самого, если бы поставили текст, который хотим выровнять вертикально внутри тега pre, который отображает свое содержимое так как оно есть.

P.S. Хотите услышать критику своего блога? Вам на блог Софкова.




Оцените полезность!
Не полезноПолезно (+3 баллов, 5 оценок)

Ваш отзыв

.Все права защищены © 2017 Блог Полезного.