Variación centrada en la tarjeta de interfaz de usuario semántica

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.

La interfaz de usuario semántica nos proporciona una manera muy fácil de mostrar contenido en forma de tarjetas de una manera muy sencilla en lugar de usar CSS. La interfaz de usuario semántica nos brinda una forma de mostrar tarjetas en diferentes variaciones y con diferentes contenidos involucrados, como enlaces, botones, aprobación, etc. código.

Variación centrada en la tarjeta de la interfaz de usuario semántica: la variación centrada en la tarjeta en la interfaz de usuario semántica nos ayuda a alinear toda la tarjeta con el centro del contenedor. La tarjeta se centrará automáticamente en el contenedor en la variación centrada en la tarjeta.

Clases de contenido de variación centrada en la tarjeta de interfaz de usuario semántica:

.centered: toda la tarjeta debe incluirse en la clase .centered para centrar la tarjeta.
.image: Encierra la imagen con esta clase.
.content: El contenido debe estar incluido dentro de esta clase.

Sintaxis:

<div class="ui centered card">
  <div class="image">
    ...
  </div>
  <div class="content">
    ...
  </div>
</div>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
  
<body>
    <center>
        <h1 class="header ui green">GeeksforGeeks</h1>
        <strong>Semantic UI Card Centered Variation</strong>
    </center>
  
    <div class="ui centered card">
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg">
        </div>
        <div class="content">
            <a class="header">GeeksforGeeks</a>
        </div>
    </div>
</body>
  
</html>

Producción :

Enlace de referencia: https://semantic-ui.com/views/card.html#centered-card

Publicación traducida automáticamente

Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta