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 fácil de mantener. 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 la utilidad de alineación centrada para contenido de texto tanto en dirección vertical como horizontal.
Clases centradas en la alineación de Blaze UI:
- u-center-block: esta clase se usa para configurar el div HTML como un bloque centrado.
- u-center-block__content: esta clase se usa para establecer el contenido del div HTML como un bloque centrado.
- u-center-block__content–vertical: esta clase se usa para establecer la alineación vertical del contenido como un bloque centrado.
- u-center-block__content–horizontal: esta clase se usa para establecer la alineación horizontal del contenido como un bloque centrado.
Sintaxis:
<div class="u-center-block">
<div class="u-center-block__content
u-center-block__content--horizontal">
...
</div>
</div>
Ejemplo 1: el siguiente código demuestra la alineación centrada predeterminada del contenido utilizando las clases anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
#mydiv {
border: 2px solid black;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<strong>Blaze UI alignment centered</strong>
</br></br>
<div id="mydiv" class="u-center-block"
style="width:300px;height:300px">
<div class="u-center-block__content">
<b>This alignment is centered.</b>
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra la alineación vertical centrada del contenido utilizando las clases anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
#mydiv {
border: 2px solid black;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<strong>Blaze UI vertical centered alignment </strong>
</br></br>
<div id="mydiv" class="u-center-block"
style="width:300px;height:300px">
<div class="u-center-block__content
u-center-block__content--vertical">
<b>Centered text</b>
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 3: El siguiente código demuestra la alineación centrada horizontal del contenido utilizando las clases anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
#mydiv {
border: 2px solid black;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<strong>Blaze UI horizontal centered alignment </strong>
</br></br>
<div id="mydiv" class="u-center-block"
style="width:300px;height:300px">
<div class="u-center-block__content
u-center-block__content--horizontal">
<b>Centered text</b>
</div>
</div>
</center>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/utils/alignment
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA