Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
El encabezado de interfaz de usuario semántica proporciona un breve resumen del contenido y nos ofrece diferentes variaciones del encabezado, como variantes divididas, bloqueadas, adjuntas, flotantes, alineación de texto, coloreadas e invertidas. Aquí, en este artículo, conoceremos la variante de alineación de texto del encabezado.
Clase de variante de alineación de texto de variaciones de encabezado de interfaz de usuario semántica:
- alineado a la derecha: esta clase se utiliza para establecer la alineación a la derecha.
- alineado a la izquierda: esta clase se utiliza para establecer la alineación a la izquierda.
- justificado: esta clase se utiliza para justificar el texto.
- alineado al centro: esta clase se utiliza para establecer el centro de alineación.
Sintaxis:
<div class="ui segment">
<element class="ui Text-Alignment-Variant-Class header">
...
</element>
</div>
Los siguientes ejemplos ilustran la variante de alineación de texto de variaciones de encabezado de interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI Header Variations Text Alignment Variant </strong> </center> <br> <div class="ui segment"> <div class="ui segment"> <h3 class="ui right aligned header"> Geeksforgeeks </h3> <h3 class="ui left aligned header"> Geeksforgeeks </h3> </div> </div> </body> </html>
Producción:
Variaciones de encabezado de interfaz de usuario semántica Variante de alineación de texto
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI Header Variations Text Alignment Variant </strong> </center> <br> <div class="ui segment"> <div class="ui segment"> <h3 class="ui justified header"> A Computer Science Portal for Geeks </h3> <h3 class="ui center aligned header"> Geeksforgeeks </h3> </div> </div> </body> </html>
Producción:
Variaciones de encabezado de interfaz de usuario semántica Variante de alineación de texto
Referencia: https://semantic-ui.com/elements/header.html#text-alignment
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA