Вертикальное центрирование

21 век, человек побывал на луне, сделан искусственный глаз, даже с зумом! и бля – нет простого очевидного способа вертикально выровнять элемент в CSS )

Столкнулся с дизайном в котором надо было сделать строку элементов разной высоты выровненной вертикально, вроде этого:

На самом деле в общем случае задача дробится на две – случай когда у нас одна строка выравнивается вертикально и случай когда несколько. Второй случай несколько сложнее.
Само собой желательно иметь решение не зависящее от высоты контейнера.

Одна строка

<div class="line">
	<span>Facebook</span>
	<a href=""><img src="facebook.png" ></a>
	<span>Twitter</span>
	<a href=""><img src="twitter.png" ></a>
</div>

Два способа работающих во всех браузерах кроме IE6:

.line{
	display: table-row;
}
	.line span{
		display: table-cell;
		vertical-align: middle;
	}
	.line a{
		display: table-cell;
		vertical-align: middle;
	}

.line{

}
	.line span{
		vertical-align: middle;
	}
	.line a{
		vertical-align: middle;
		display: inline-block;
	}

Второй способ на мой взгляд более здравый, как то странно превращать элементы в таблицы и ячейки только для вертикального выравнивания.

Несколько строк

<div class="line">
	<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod... </span>
</div>

Метод в данном случае известный – элемент контейнер имеет межстрочное расстояние равное высоте а вложенный элемент возвращает межстрочное на место:

.line{
	line-height: 7em;
	height: 7em;
}
	.line span{
		display: inline-block;
		vertical-align: middle;
		line-height: 1.2em;
	}
	.ie7 .line span{
		display: block;
		margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" :
		(parentNode.offsetHeight - this.offsetHeight)/2 + "px");
	}

.ie7 .line span – костыль для IE7.

И еще один способ в котором в блок при помощи :before вставляется элемент растянутый по высоте на 100% и выровненный по центру, он создает нужную высоту строки.

.fline{
	height: 10em;
}
	.fline:before {
		content: "";
		height: 100%;
		position: relative;
		width: 0px;
		font-size: 0;
		display: inline-block;
		vertical-align: middle;
	}
	.fline span{
		display: inline-block;
		vertical-align: middle;
		width: 320px;
	}
	.fline  img{
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
	}

Этот прием в IE7 работать не будет конечно же поскольку он не понимает псевдоселектор :before

пример

Работает в:

По теме

Vertical centering using CSS

Tags:

Комментировать