CSS vertical align

CSS vertical align

DEMO: "CSS vertical align"

In HTML td tag has an attribute named "valign" which can align content vertically. CSS doesnt have such an attribute, so you need to do some magic to achieve such a result. CSS vertical align. Using method described below you will be able to align an element vertically in any height container.

Source code for 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>