Puede alinear fácilmente los elementos del formulario en el centro usando flexproperty en Tailwind CSS. Tailwind utiliza la propiedad justify-center y items-center, que es una alternativa a la propiedad flexible en CSS .
Sintaxis:
<div class="flex flex-col justify-center items-center">
....
</div>
propiedad flexible:
- flex-col: esta propiedad apila los elementos flexibles en forma de columna.
- justificar-centro: esta propiedad alinea los elementos flexibles en el centro en dirección vertical cuando los elementos flexibles se apilan en columnas.
- items-center: Esta propiedad alinea los elementos flexibles en el centro en una dirección horizontal cuando los elementos flexibles se apilan en forma de columna.
Nota: Cuando los elementos flexibles se apilan en filas, la propiedad de justificar contenido alinea los elementos flexibles en el centro en dirección horizontal y la propiedad de centro de elementos alinea los elementos flexibles en el centro en dirección vertical .
Concepto importante: cada vez que cambia la dirección de su flexión, también está cambiando la alineación horizontal (justify-{alignment}) y la alineación vertical (items-{alignment}). Por lo tanto, justificar-{alineación} está en dirección horizontal si la flexión está en la dirección de la fila. Cuando la flexión está en la dirección de la columna, la justificación {alineación} está en la dirección vertical.
Es inverso para elementos-{alineación}, es decir, es dirección vertical siempre que la flexión esté en dirección de fila; de lo contrario, es horizontal en dirección de columna.
Nota: es importante dar la altura adecuada al contenedor para alinear la forma o flexionar en el centro tanto en dirección horizontal como vertical, es decir, pantalla h ( haga un elemento para abarcar toda la altura de la ventana gráfica ) porque por defecto todos los contenedores ocupan todo su ancho, pero no ocupan toda su altura.
Es importante cambiar la altura de la pantalla.
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA