Вертикално подравняване на текста, CSS трикове в Руската

Вертикално подравняване на текста.

Налице е добър начин да се вертикално центриране на текста в блока

използване на CSS. Необходимо е да се определи височината на текст линия (линия-височина на текста) на блока равно на височината (височината). Тя изглежда добре, но основният недостатък е, че текстът трябва да опаковам.

Класически пример за текст, състоящ се от няколко реда и центрира вертикално и хоризонтално - "мехурчета" с думите на героите. Това може да стане чрез CSS, използвайки CSS таблици. Ето какво се случва:

Вертикално подравняване на текста, CSS трикове в Руската

Вземете най-прост HTML. "Зона" - регион, в който искаме да центрирате текста. Задайте го позиция собственост на роднина на. Това ще позволи абсолютно позициониране на текста в рамките на "балон".

За "балон" на региона определят имота дисплей за маса. че само по себе си не означава нищо, но след това можем да определим вътрешният елемент

дисплей имот, равен на маса клетка. която ще ни позволи да се вертикално подравняване на текста в него.

Красива е, нали?

И как работи с IE <=7.

IE 8 поддържа CSS-маса, така че това показва правилната страница, но по-старите версии не го правят. В rezulate получаваме следното:

Вертикално подравняване на текста, CSS трикове в Руската

Въпреки това, има няколко решения.

Едно от решенията - обвиване таг

в друга

и поставете следния код:

Следващият начин да се избегне изтичане на памет (изчислява само веднъж)

И още един метод, като се използва малко по-различна техника за IE. Тя изисква допълнителен

. но нека не се използва изразът.