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.
Las variaciones de elementos de interfaz de usuario semántica nos ofrecen diferentes variantes de elementos como apilamiento, dividido, relajado, elemento de enlace, alineación vertical y contenido flotante. En este artículo, aprenderemos sobre la variante de alineación vertical de variaciones de elementos de interfaz de usuario semántica.
Variaciones de elementos de interfaz de usuario semántica La variante de alineación vertical se utiliza para definir la alineación de elementos verticalmente.
Variaciones de elementos de interfaz de usuario semántica Clase de variante de alineación vertical:
- alineación superior: Esta clase se utiliza para hacer la alineación en la parte superior.
- alineación media: Esta clase se utiliza para hacer la alineación en el medio.
- alineación inferior: esta clase se utiliza para hacer la parte inferior en el medio.
Sintaxis:
<div class="Vertical-Alignment-Variant-Class content"> ... </div>
Los siguientes ejemplos ilustran la variante de alineación vertical de las variaciones de elementos de la interfaz de usuario semántica:
Ejemplo 1: En este ejemplo, estableceremos la alineación vertical del artículo en el centro.
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 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Item Variations Vertical Alignment Variant</strong> </center> <br><br> <br> <div class="ui items container"> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="middle aligned content"> <a class="header" href="https://www.geeksforgeeks.org/"> Geeksforgeeks </a> <div class="meta"> <span>A Computer Science Portal for Geeks</span> </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de elementos de interfaz de usuario semántica Variante de alineación vertical
Ejemplo 2: En este ejemplo, estableceremos la alineación vertical del artículo arriba y abajo.
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 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Item Variations Vertical Alignment Variant</strong> </center> <br><br> <br> <div class="ui items container"> <strong>Top Alignment:</strong> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="top aligned content"> <a class="header" href="https://www.geeksforgeeks.org/"> Geeksforgeeks </a> <div class="meta"> <span>A Computer Science Portal for Geeks</span> </div> </div> </div> <strong>Bottom Alignment:</strong> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="bottom aligned content"> <a class="header" href="https://www.geeksforgeeks.org/"> Geeksforgeeks </a> <div class="meta"> <span>A Computer Science Portal for Geeks</span> </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de elementos de interfaz de usuario semántica Variante de alineación vertical
Referencia: https://semantic-ui.com/views/item.html#vertical-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