www.tuljo.com

Centering Form Elements

Centering form elements on page around a central line.

A simple construction to use on simple cases. Line-height or font-size may need adjusting.

CODE

<div class="formBox">
	<div class="labels">description:</div><div class="elements"><input type="text" /></div>
	<div class="labels">email:</div><div class="elements"><input type="text" size="30" /></div>
</div>

CSS

.formBox{background:#eee;
	width:500px;
}
.labels{background:#ede;
	float:left;
	text-align:right;
	width:160px;
}
.elements{background:#dee;
	float:right;
	text-align:left;
	width:330px;
}

2008

Web Development - XHTML CSS JavaScript jQuery.