Steps to align textbox and label

Step 1: Center a div tag using margin as 0 auto.

Step 2: Align the label to right and make it float to left.

Step 3: Align the textbox to left and make it float to right.

Step 4: Make both label and textbox to inline-block.

HTML & CSS

<!DOCTYPE html>
<html>
<head>
	<title>Centering a form</title>
</head>
<body>
	<div class="form">
		<label>Name</label>
		<input type="text" name="name">

		<label>Email</label>
		<input type="text" name="email">

		<label>Phone</label>
		<input type="text" name="phone">
	</div>
</body>
</html>

<style type="text/css">
	.form {
		margin: 0 auto;
		width: 210px;
	}

	.form label{
		display: inline-block;
		text-align: right;
		float: left;
	}

	.form input{
		display: inline-block;
		text-align: left;
		float: right;
	}
</style>

Live demo here: https://jsfiddle.net/durtpwvx/


Aravind Appadurai