Open In App

How to align form elements to center using Tailwind CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 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=
"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 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:



Last Updated : 12 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads