Web development, coding & SEO

Vertical align div tag

Vertical align div tag - align an element vertically using css.

Way 1

In case the content to be centered is sophisticated, sample, contains several DIVs.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Sample

Markup

<div class="thing" style="background:#eee;">
	<div class="aligner-a" style="background:#eed;">
		<div class="aligner-b" style="background:#ede;">
			<div>
				xxx xxx xxx xxx xxx
			</div>
			<div>
				xxx xxx xxx xxx xxx
			</div>
		</div>
	</div>
</div>

CSS

.thing{
	display:table;
	height:36px;
	overflow:hidden;
	padding-left:5px;/*padding - can't use float here, hence margin doesn't work to pull the thing away from another thing on left.*/
	*position:relative;
}
.aligner-a{
	display:table-cell;
	*position:absolute;
	*top:50%;
	vertical-align:middle;
}
.aligner-b{
	*position:relative;
	*top:-50%;
}

Way 2

At simple cases.

Apply height and line-height, and an inline element (<div> display:inline;) inside centers himself vertically.

2009

---