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.
Hay diferentes estilos de poner imágenes en nuestro sitio web usando semantic-ui que hacen que nuestro sitio web se vea más impresionante. Las variaciones alineadas verticalmente de la imagen de interfaz de usuario semántica se utilizan para agregar la alineación vertical de las imágenes en una página web.
Clases de variaciones alineadas verticalmente de imagen de interfaz de usuario semántica:
- alineado superior: Se utiliza para establecer la alineación en la parte superior.
- alineado en el medio: se utiliza para establecer la alineación en el medio.
- alineado en la parte inferior: se utiliza para establecer la alineación en la parte inferior.
Sintaxis:
<img class="ui top aligned image" src="gfg.png"> <span>Top Aligned</span>
Ejemplo 1: En este ejemplo, utilizaremos las variaciones alineadas verticalmente de la imagen de interfaz de usuario semántica para mostrar la alineación de la imagen.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Vertically Aligned Variations </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Image Vertically Aligned Variations</h3> <img class="ui top aligned tiny image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <span>GeeksforGeeks Top Aligned</span> <hr> <img class="ui middle aligned tiny image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <span>GeeksforGeeks Middle Aligned</span> <hr> <img class="ui bottom aligned tiny image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <span>GeeksforGeeks Bottom Aligned</span> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, utilizaremos variaciones alineadas verticalmente de la imagen de interfaz de usuario semántica con variaciones circulares para mostrar la alineación de la imagen.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Vertically Aligned Variations </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Image Vertically Aligned Variations</h3> <img class="ui top aligned tiny circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <span>GeeksforGeeks Top Aligned</span> <hr> <img class="ui middle aligned tiny circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <span>GeeksforGeeks Middle Aligned</span> <hr> <img class="ui bottom aligned tiny circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <span>GeeksforGeeks Bottom Aligned</span> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/image.html#vertical-aligned
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA