Esta clase acepta muchos valores en Tailwind CSS en los que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad text-align de CSS . Esta clase se utiliza para especificar la alineación horizontal del texto en un elemento.
Clases de alineación de texto:
- texto a la izquierda
- centro de texto
- texto a la derecha
- justificación de texto
text-left: Se utiliza para establecer la alineación del texto a la izquierda.
Sintaxis:
<element class="text-left">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Text Alignment Class</b> <div class="mx-24 bg-green-200"> <p class="p-4 text-left"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to persue an engiinering degree or wants to create a career on engineering field. </p> </div> </body> </html>
Producción:
text-center: se utiliza para establecer la alineación del texto en el centro.
Sintaxis:
<element class="text-center">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Text Alignment Class</b> <div class="mx-24 bg-green-200"> <p class="p-4 text-center"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to persue an engiinering degree or wants to create a career on engineering field. </p> </div> </body> </html>
Producción:
text-right: se utiliza para establecer la alineación del texto a la derecha.
Sintaxis:
<element class="text-right">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Text Alignment Class</b> <div class="mx-24 bg-green-200"> <p class="p-4 text-right"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to persue an engiinering degree or wants to create a career on engineering field. </p> </div> </body> </html>
Producción:
text-justify: Se utiliza para estirar el contenido de un elemento para mostrar el mismo ancho de cada línea.
Sintaxis:
<element class="text-left">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h2 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h2> <b>Tailwind CSS Text Alignment Class</b> <div class="mx-24 bg-green-200"> <p class="p-4 text-justify"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to persue an engineering degree or wants to create a career on engineering field. </p> </div> </body> </html>
Producción:
justifique el texto
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA