En este artículo, aprenderemos sobre Bulma Mixins Center . El mixin center() en Bulma permite a los usuarios posicionar absolutamente un elemento con dimensiones fijas en el centro de su clase principal más cercana. Cualquier elemento como una imagen o texto se puede centrar con la ayuda de Bulma center mixin. A continuación se muestra el ejemplo completo con una imagen y se ilustra el texto.
Clase central de Bulma Mixins: para crear un mixin, Bulma no proporciona una clase específica; en su lugar, podemos crear nuestra propia clase y luego diseñar el elemento con la ayuda de los mixins de SASS.
Sintaxis:
<div class="bulma-mixin-center-parent">
<img
class="bulma-mixin-center"
src="link_image.png"
>
</div>
.bulma-mixin-center {
@include center();
}
Nota: debe conocer la implementación de mixins SASS para los siguientes ejemplos. Consulte el requisito previo proporcionado en el enlace y luego implemente el siguiente código.
Ejemplo 1: El siguiente ejemplo ilustra el centro Bulma Mixins usando una imagen.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container content "> <h1 class="title">Bulma Center</h1> <div class="bulma-mixin-center-parent"> <img class="bulma-mixin-center" height="200" width="200" src= "https://pbs.twimg.com/profile_images/1476085383469445124/1ZRVN-QB_400x400.jpg"> </div> </div> </body> </html>
CSS
@mixin center() {
position: absolute;
left: calc(50% - (96px * .5));
top: calc(50% - (96px * .5));
border-radius: 1px;
height: 96px;
width: 96px;
}
.bulma-mixin-center-parent {
background-color: rgb(58, 231, 58);
background-size: cover;
border-radius: 0.5em;
position: relative;
height: 15rem;
width: 20rem;
}
.bulma-mixin-center {
@include center();
}
Producción:
Bulma Mixins Center usando imagen
Ejemplo 2: El siguiente ejemplo ilustra el centro Bulma Mixins usando Texto.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container content "> <h1 class="title">Bulma Center</h1> <div class="content bulma-mixin-center-parent"> <h1 class="title"> <span class="bulma-mixin-center"> Centered </span> </h1> </div> </div> </body> </html>
CSS
@mixin center() {
position: absolute;
left: calc(50% - (96px * .5));
top: calc(50% - (96px * .5));
border-radius: 1px;
height: 150px;
width: 150px;
color: white;
}
.bulma-mixin-center-parent {
background-color: orange;
background-size: cover;
border-radius: 0.5em;
position: relative;
height: 20rem;
width: 35rem;
}
.bulma-mixin-center {
@include center();
}
Producción:
Centro Mixins de Bulma usando texto
Referencia: https://bulma.io/documentation/utilities/mixins/#center
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA