You can easily align form elements in the center using flex property in Tailwind CSS. Tailwind uses justify-center and items-center property which is an alternative to the flex-property in CSS.
Syntax:
<div class="flex flex-col justify-center items-center">
....
</div>flex property:
- flex-col: This property stacks the flex items column-wise.
- justify-center: This property aligns the flex items in the center in the vertical direction when the flex items are column-wise stacked.
- items-center: This property aligns the flex items in the center in a horizontal direction when the flex items are stacked column- wise.
Note: When flex items are stacked row-wise then, the justify-content property aligns the flex items in the center in the horizontal direction and the items-center property aligns the flex items in the center in the vertical direction.
Important Concept: Whenever you flip the direction of your flex, then you are also flipping both horizontal alignment ( justify-{alignment} ) and vertical alignment ( items-{alignment} ). So justify-{alignment} is in horizontal direction if flex is in the row direction. When the flex is in the column direction then justify-{alignment} is in vertical direction.
It’s inverse for items-{alignment} i.e it is vertical direction as long as the flex is in row-direction otherwise it is horizontal in the column-direction.
Note: It is important to give the proper height to the container in order to align form or flex in the center in both horizontal and vertical direction i.e h-screen ( make an element to span the entire height of the viewport ) because by default all container take up their entire width, but they don’t take up their entire height.
It is important to change the height of the screen.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="h-screen flex flex-col
items-center justify-center">
<p class="text-green-700 text-xl mb-3">
Welcome to GeeksforGeeks
</p>
<form>
<input aria-label="Enter your email address"
type="text" placeholder="Email address"
class="text-sm text-gray-base w-full
mr-3 py-5 px-4 h-2 border
border-gray-200 rounded mb-2" />
<input aria-label="Enter your password"
type="password" placeholder="Password"
class="text-sm text-gray-base w-full mr-3
py-5 px-4 h-2 border border-gray-200
rounded mb-2" />
<button type="submit"
class="bg-green-400 w-full mt-4">
Login
</button>
</form>
</div>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet">
</head>
<body >
<div class="h-screen flex flex-col items-center
justify-center border rounded">
<p class="text-green-700 text-xl mb-3 ">
Welcome to GeeksforGeeks
</p>
<form >
<label class="text-gray-500">
Select Course
</label>
<select class="form-select mt-1 w-full">
<option>Data Structure</option>
<option>Operating System</option>
<option>Web Development</option>
<option>Competitive Programming</option>
</select>
</label>
<label class=" mt-4">
<span class="text-gray-500">
Requested Limit
</span>
<select class="form-select
mt-1 block w-full">
<option>$20</option>
<option>$25</option>
<option>$15</option>
<option>$10</option>
</select>
</label>
<button
type="submit"
class="bg-green-400 w-full mt-4">
Confirm
</button>
</form>
</div>
</body>
</html>
|
Output:
