Open In App

Bulma Mixins Center

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll learn about Bulma Mixins Center. The center() mixin in Bulma allows the users to absolutely position an element with fixed dimensions at the center of its closest positioned parent class. Any element like an image or text can be centered with the help of Bulma center mixin. Below is the full example using an image and text is illustrated.

Bulma Mixins center class: For creating a mixin, no specific class is provided by Bulma, instead we can create our own class and then style the element with the help of SASS mixins.

Syntax:

<div class="bulma-mixin-center-parent">
    <img 
      class="bulma-mixin-center"
      src="link_image.png"
    >
</div>

.bulma-mixin-center {
    @include center();
}

Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.

Example 1: The below example illustrates the Bulma Mixins center using an Image.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
          href=
    <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=
        </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();
}


Output:

Bulma Mixins Center

Bulma Mixins Center using Image

Example 2: The below example illustrates the Bulma Mixins center using Text.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href=
    <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();
}


Output:

Bulma Mixins Center

Bulma Mixins Center using Text

Reference: https://bulma.io/documentation/utilities/mixins/#center



Last Updated : 28 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads