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.


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

		<input type="text" name="email">

		<input type="text" name="phone">

<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;

Live demo here:

Aravind Appadurai