Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, aprenderemos sobre la alineación centrada en la interfaz de usuario de Blaze. Se utiliza para colocar el contenido en el centro ya sea horizontalmente/verticalmente/o ambos.
Clases usadas:
- u-center-block: esta clase se utiliza para establecer la posición en relativa.
- u-center-block__content: Esta clase tiene tres cosas que hacer; establece la izquierda al 50%, establece la posición en absoluto y establece la parte superior al 50%, lo que finalmente ayuda a colocar el contenido en el centro.
Sintaxis
<div class="u-center-block ">
<div class="u-center-block__content">Content</div>
</div>
Ejemplo 1: En este ejemplo, escribiremos un texto. El texto escrito dentro de un div con clase u-center-block__content se alineará al centro tanto vertical como horizontalmente. Hemos utilizado colores de fondo para su mejor comprensión.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Blaze UI Alignment Centered</h3> <div class="u-center-block " style="background: pink;width:50%"> Hi Geek!! <br><br> <div class="u-center-block__content" style="background: yellow;"> GeeksforGeeks </div> </div> </body> </html>
Producción:
El div de color amarillo está alineado al centro tanto horizontal como verticalmente.
Ejemplo 2: En este ejemplo, mostraremos cómo podemos alinear al centro un div que contiene una imagen y una etiqueta <p>, tanto vertical como horizontalmente.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Blaze UI Alignment Centered</h3> <div class="u-center-block " style="background:pink; height:400px;width:50%"> <div class="u-center-block__content"> <p>GeeksforGeeks</p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png" height=100px width=100px /> </div> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/utils/alignment/
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA