Вертикальное выравнивание содержимого блоков в Internet Explorer

XML&HTML&CSS | 20.03.2010 | Метки: ,

Логотип W3CКак-то понадобилось выровнять блок текста в теге <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.


Добавление комментария:

 css.php