Blaze UI Centered Alignment
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
In this article, we will learn about Blaze UI Centered Alignment. It is used to place the content at the center whether horizontally / vertically / or both.
Used Classes:
- u-center-block: This class is used to set the position to relative.
- u-center-block__content: This class has three things to do; sets left to 50%, set position to absolute, and sets top to 50%, which finally help in placing the content to center.
Syntax
<div class="u-center-block "> <div class="u-center-block__content">Content</div> </div>
Example 1: In this example, we will write some text. The text written inside a div with class u-center-block__content will be center-aligned vertically as well as horizontally. We have used background colors for your better understanding.
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" > w3wiki </ 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;" > w3wiki </ div > </ div > </ body > </ html > |
Output:
The yellow-colored div is center aligned horizontally as well as vertically.
Example 2: In this example, we will show how we can center align a div containing an image as well as a <p> tag, vertically as well as horizontally.
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" > w3wiki </ 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 >w3wiki</ p > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png" height = 100px width = 100px /> </ div > </ div > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/utils/alignment/
Contact Us