Web development, coding & SEO

Centering Form Elements

Centering form elements on page around a central line.

Such simple constructions are usable on simple cases only. Default line-height or font-size may mess them up.

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