Часто буває, що потрібно вирівняти текст по нижньому краю або по середині блоку. Начебто все просто: вказати для DIV display: table-cell і vertical-align: middle (або bottom), але IE не розуміє значення table-cell для властивості display. Доведеться викручуватися.
Рішення проблеми для вирівнювання по нижньому краю і по середині блоку трохи відрізняються один від одного, але побудовані на одному принципі: позиціонування сатиричного елемента всередині блокового.
Вирівнювання по нижньому краю.
Щоб вирівняти текст по нижньому краю блочного елемента, необхідно блоку задати відносне позиціонування, текст вставити в тег SPAN і задати йому абсолютне позиціонування:
Цей спосіб відмінно спрацює у всіх браузерах і ніяких хаков або умовних коментарів не потребує.
Вирівнювання по середині блоку
В даному випадку нам буде потрібно ще один SPAN. Перший SPAN помістить текст щодо середини, а другий підніме текст на половину своєї висоти.
Але це спрацює тільки в Internet Explorer, так як він по-особливому обробляє властивість top. Для кросбраузерності нашого коду доведеться вдатися до умовних Коментар для IE, а для інших браузерів використовувати display: table-cell і vertical-align: middle. Ось повний код для всіх браузерів:
До речі, якщо Вам буде потрібно вирівняти текст ще й по горизонталі, додайте до опису стилю для тега SPAN наступне:
Тепер Ви можете вирівнювати текст і по горизонталі за допомогою властивості text-align для тег SPAN.