Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Containers proporciona una pantalla multimedia de diferentes anchos para colocar el contenido dentro de ella según los diferentes requisitos. Los contenedores tienen tamaños que van desde pequeños hasta súper grandes.
Clase de alineación vertical de contenedores de Blaze UI:
- u-center-block__content–vertical : Esto alineará el contenido verticalmente.
Sintaxis : Alinee el contenido verticalmente de la siguiente manera:
<div class="u-center-block">
<div class="u-center-block__content
u-center-block__content--vertical">
<!-- Content -->
</div>
</div>
Ejemplo 1: en el siguiente ejemplo, tenemos contenido centrado verticalmente dentro de un contenedor de tamaño fijo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Containers Vertical Alignment</strong> <br /> </center> <br /> <div class="u-center-block" style="height: 200px; background-color: lightgreen;"> <div class="u-center-block__content u-center-block__content--vertical"> <h3>Welcome to GeeksforGeeks</h3> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2 : en el siguiente ejemplo, tenemos varios contenedores con contenido centrado verticalmente.
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"/> <title>GeeksforGeeks | BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container"> <center> <div> <h1 style="color: green;">GeeksforGeeks</h1> </div> <strong>Blaze UI Containers Vertical Alignment</strong> <br/> </center> <br/> <div class="u-center-block" style="height: 200px; background-color: lightgreen;"> <div class="u-center-block__content u-center-block__content--vertical"> <h3>Welcome to GeeksforGeeks</h3> </div> </div> <div class="u-center-block" style="height: 200px; background-color: lightcoral;"> <div class="u-center-block__content u-center-block__content--vertical"> <h3>Data Structures and Algorithms</h3> </div> </div> <div class="u-center-block" style="height: 200px; background-color: lightgoldenrodyellow;"> <div class="u-center-block__content u-center-block__content--vertical"> <h3>Machine Learning</h3> </div> </div> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/utils/alignment/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA