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 elemento Tarjeta de IU semántica muestra el contenido del sitio de manera similar a un naipe que usa las clases de IU semántica. En este artículo, discutiremos las variaciones de alineación de texto de las tarjetas de interfaz de usuario semántica.
Para cambiar la alineación del texto de la tarjeta de IU semántica, usamos la clase «alineada al centro/izquierda/derecha» en la sección de la tarjeta donde queremos la alineación. Podemos usar esta clase en el <div> principal que contiene la clase «tarjeta» si queremos la alineación del texto en toda la tarjeta o también podemos alinear diferentes secciones de la tarjeta por separado.
Clase de variación de alineación de texto de tarjeta de interfaz de usuario semántica:
- alineado al centro: esta clase se utiliza para alinear el texto de la tarjeta al centro.
- alineado a la izquierda: esta clase se utiliza para alinear el texto de la tarjeta a la izquierda.
- alineado a la derecha: esta clase se utiliza para alinear el texto de la tarjeta a la derecha.
Sintaxis:
<div class="center/left/right aligned card">
content....
</div>
Ejemplo 1: Este ejemplo demuestra varias variaciones de alineación de texto de la tarjeta semántica-UI.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong> Semantic UI card Text-Alignment variations </strong><br /><br /> </center> <div class="ui one cards"> <div class="card"> <div class="left aligned content"> Geeksforgeeks Left </div> </div> <div class="card"> <div class="center aligned content"> Geeksforgeeks Center </div> </div> <div class="card"> <div class="right aligned content"> Geeksforgeeks Right </div> </div> </div> </body> </html>
Producción:
Producción
Ejemplo 2: este ejemplo demuestra diferentes variaciones de alineación de texto en diferentes secciones de la misma tarjeta.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong> Semantic UI card Text-Alignment variations </strong><br /><br /> </center> <div class="ui card" style="margin-left: 100px"> <div class="content"> <div class="left aligned header"> Geeksforgeeks </div> <div class="center aligned description"> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </div> </div> <div class="extra content"> <div class="right aligned author"> <img class="ui avatar image" src= "http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png" /> Priyank </div> </div> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#text-alignment
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA