How to align form elements to center using Tailwind CSS ?
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 = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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 w3wiki </ 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 = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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 w3wiki </ 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: