<Mr.ElectroNick>
/* personal website */

CSS vertical align — вертикальное выравнивание при помощи CSS

CSS vertical align — вертикальное выравнивание при помощи CSS

В теге TD есть аттрибут «valign» который используется для вертикального выравнивания контента.
В CSS такого аттрибута нет поэтому требуются определенные «трюки» для достижения подобного результата.
Используя метод описаный нижен вы сможете устанавливать вертикальное выравнивания в любом элементе любой высоты.

Исходный код для index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
	<title>DEMO: CSS vertical align</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	<style type="text/css"> 
		.v-outer {
			display: table;
			#position: relative;
			overflow: hidden;
			height: 100px;
			background: black;
			color: white;
			width: 100%;
		}
 
		.v-middle {
			display: table-cell;
			#position: absolute;
			#top: 50%;
			vertical-align: middle;
		}
 
		.v-inner {
			#position: relative;
			#top: -50%;
		}
</style> 
</head> 
 
<body> 
 
	<div class="border v-outer"> 
	<div class="v-middle"> 
	<div class="v-inner"> 
	...content...
	</div> 
	</div> 
	</div> 
 
</body> 
</html>
Оригинал статьи: http://www.webtoolkit.info/css-vertical-align.html
01/03/2009
Опубликовано в категории: CSS