Puede alinear fácilmente div verticalmente en la pantalla completa usando la propiedad flexible en Tailwind CSS. Tailwind utiliza las propiedades de centro de justificación y centro de elementos, que es una alternativa a la propiedad flexible en CSS.
Sintaxis:
<div class="flex h-screen justify-center items-center">
. . .
</div>
propiedad flexible:
- h-screen: hace que un elemento abarque toda la altura de la ventana gráfica porque, de forma predeterminada, todos los contenedores ocupan todo su ancho, pero no ocupan toda su altura.
- justificar-centro: esta propiedad alinea los elementos flexibles en el centro en la dirección horizontal (eje principal) cuando los elementos flexibles se apilan en filas.
- items-center: esta propiedad alinea los elementos flexibles en el centro en una dirección vertical (eje transversal) cuando los elementos flexibles se apilan en filas.
Nota: Cuando los elementos flexibles se apilan en columnas, la propiedad de justificar contenido alinea los elementos flexibles en el centro en dirección vertical y la propiedad de centro de elementos alinea los elementos flexibles en el centro en dirección horizontal.
Concepto importante: cada vez que cambia la dirección de su flexión, también está cambiando las alineaciones horizontales (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.
Ejemplo 1:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="flex h-screen justify-center items-center bg-green-300"> <div class="text-center h-40 w-40 bg-pink-400"> <h2 style="color:green"> GeeksforGeeks </h2> <b>Align div vertically</b> </div> </div> </body> </html>
Salida: A partir de este ejemplo, puede observar que el cuadro de color rosa está alineado verticalmente en toda la pantalla.
Ejemplo 2: Uso de m-auto para centrar el elemento. El m-auto se utiliza para centrar el elemento tanto horizontal como verticalmente. El siguiente ejemplo alineará el div vertical y horizontalmente en toda la pantalla.
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="flex h-screen bg-pink-200"> <div class="m-auto bg-green-300 "> <h2 style="color:green "> GeeksforGeeks </h2> <b> LEFT BOX</b> </div> <div class="m-auto bg-green-300 "> <h2 style="color:green "> GeeksforGeeks </h2> <b> RIGHT BOX</b> </div> </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