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 hace que nuestro sitio web se vea más impresionante. Las variaciones centradas en la imagen de interfaz de usuario semántica se utilizan para agregar una imagen centrada en un bloque de contenido.
Clase de variación centrada en la imagen de la interfaz de usuario semántica:
- centrado: Se utiliza para colocar la imagen al centro del bloque de contenido.
Sintaxis:
<div class="ui segment">
<img class="ui centered medium image" src="gfg.png">
</div
Ejemplo 1: En este ejemplo, describiremos las variaciones centradas en la imagen de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Centered 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 Centered Variations </h3> <img class="ui centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, describiremos la variación centrada en la imagen de interfaz de usuario semántica con variación redondeada.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Centered 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 Centered Variations </h3> <img class="ui centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/image.html#centered
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA