Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
La lista de interfaz de usuario semántica nos proporciona diferentes variaciones de la lista, como las variantes horizontal, invertida, de selección, animada, relajada, dividida, en celdas y de tamaño.
La variación de contenido alineado verticalmente de la lista de IU semántica se usa para agregar alineación vertical dentro de los elementos de la lista.
Lista de IU semántica Variación de contenido alineado verticalmente Clase utilizada:
- alineado superior: esta clase se utiliza para establecer la alineación superior del elemento de la lista.
- alineación media: esta clase se utiliza para establecer la alineación media del elemento de la lista.
- alineado en la parte inferior: esta clase se utiliza para establecer la alineación inferior del elemento de la lista.
Sintaxis:
<div class="ui horizontal list">
<div class="item">
<img class="ui avatar image" src="gfg.png">
<div class="top aligned content"> Content... </div>
</div>
...
</div>
Ejemplo 1: este ejemplo describe los usos de la variación de contenido alineado verticalmente de la lista de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Vertically Aligned Content Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Vertically Aligned Content Variation</h3> <div class="ui list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="top aligned content">GeeksforGeeks</div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> <div class="middle aligned content">HTML</div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> <div class="bottom aligned content">CSS</div> </div> </div> </div> </body> </html>
Producción:
Lista de IU semántica Variación de contenido alineado verticalmente
Ejemplo 2: este ejemplo describe los usos de la variación de contenido alineado verticalmente de la lista de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Vertically Aligned Content Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3> Semantic-UI List Vertically Aligned Content Variation </h3> <div class="ui horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="top aligned content"> GeeksforGeeks </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> <div class="middle aligned content"> HTML </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> <div class="bottom aligned content"> CSS </div> </div> </div> </div> </body> </html>
Producción:
Lista de IU semántica Variación de contenido alineado verticalmente
Referencia: https://semantic-ui.com/elements/list.html#vertical-aligned