Вертикальное выравнивание элемента внутри блока

Выравнивание с помощью css свойства table и expression для ИЕ 7. Предположим, что у нас стоит задача выровнять абзац с текстом по вертикали относительно элемента с заранее известными размерами.

Сначала создадим html разметку:

<div class="conteiner_wrap">
	<p">Абзац текста, который требуется выровнять по вертикали относительно серого блока.</p">
</div>

К блоку с классом conteiner_wrap и абзацу с текстом применим следующие стили:

.conteiner_wrap {
	padding:10px; /*что бы текст не прилегал к краям основного блока*/
	width: 150px; /*ширина основного блока*/
	height: 250px; /*высота основного блока*/
	background: #eee; /*цвет фона задан для наглядности*/
	position: relative; /*выдергиваем блок из потока*/
	display: table; /*блок будет отображаться как табличный*/
}
.conteiner_wrap p {
	display: table-cell; /*абзац будет отображаться как ячейка таблицы (TD)*/
	vertical-align: middle; /*выравниваем абзац по вертикали*/
	text-align: center; /*выравниваем абзац по горизонтали*/
}

Если требуется, что бы блоков было несколько и они выстраивались друг за другом, следует основному контейнеру conteiner_wrap добавить css свойство float:left;. Для наглядности в примере ниже выводятся три блока с текстом.

Пример того, что должно получиться:

Существенным недостатком данного способа является отсутствие поддержки в IE 7. К счастью, с помощью небольших "танцев с бубном" этот браузер покажет то, что задумано.

Что бы непокорный "ослик" не капризничал добавим пару стилевых правил к абзацу с текстом:

.conteiner_wrap p {
display: table-cell;
vertical-align: middle;
text-align: center;
*position: inherit;
*clear: expression(style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"), style.clear = "none", 0);
}

Что бы css код оставался валидным, правила для IE прячем в условные комментарии, или выносим в отдельный стилевой файл.

Если свойство expression по каким либо причинам применить нельзя, то можно обойтись и без его использования.