www.tuljo.com

Vertical align div tag

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

A simple case

At simple cases.

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

A more sophisticated case

When there is more stuff, say a whole block of mixed content to be centered vertically, we have to apply more CSS.

Solution from: 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%;
}

2009

Web Development - XHTML CSS JavaScript jQuery.