Как-то понадобилось выровнять блок текста в теге <div> (в свою очередь находящего в ячейке таблицы) по вертикали и по горизонтали.
Сделать это обычными методами (text-align: center; и vertical-align: middle;) получилось только для FireFox и Opera, в итоге Internet Explorer 8 отличился.
Как и ожилалось проблема существует. После поисков в интернетах нашлось решение с помощью CSS: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.
В данной заметке кратко и упрощенное описание CSS-метода.
Свойства CSS:
#outer1 {height: 100px; overflow: hidden;width: 200px; text-align:center;display:table;} #outer[id] {display: table; position: static;} #middle[id] {display: table-cell; vertical-align: middle; position: static;} <!--[if IE]> #outer {position: relative;} #middle {position: absolute; top: 50%;} /* for explorer only*/ #inner {position: relative; top: -50%;} /* for explorer only */ <![endif]--> |
Часть HTML-файла:
<td> <div id="outer1"> <div id="middle"> <div id="inner"> <a href="#">Выровненный по обоим измерениям текст</a> </div> </div> </div> </td> |
Суть проблемы:
Для вертикального выравнивания в блоках разработчики W3C предлагают использовать свойство {display: table-cell;} (http://www.w3.org/TR/CSS2/tables.html#value-def-table-cell или тут http://www.w3.org/TR/CSS2/visudet.html), которое предназначено для наделения блокового элемента свойствами ячейки таблицы. Совместное его использование с «табличным» свойством {vertical-align: middle;} решает поставленную задачу в браузерах поддерживающих стандарты W3C, соответственно Internet Explorer, свойство {display: table-cell;} не поддерживает.
Дополнительно:
Вариант вертикального и горизонтального центрирования с использованием JavaScript Expression (элементов JavaScript-кода внедряемого в CSS и работающего только в IE) в заметке «Horizontally and vertically centered (fully centered across browser-land…)» на http://www.gunlaug.no/contents/wd_additions_20.html.