Blaze UI Utility for Alignment Centered
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 the centered alignment for text contents utility for both vertical and horizontal directions.
Blaze UI alignment centered classes:
- u-center-block: This class is used to set the HTML div as a centered block.
- u-center-block__content: This class is used to set the content of the HTML div as a centered block.
- u-center-block__content–vertical: This class is used to set the vertical alignment of content as a centered block.
- u-center-block__content–horizontal: This class is used to set the horizontal alignment of content as a centered block.
Syntax:
<div class="u-center-block"> <div class="u-center-block__content u-center-block__content--horizontal"> ... </div> </div>
Example 1: The following code demonstrates the default centered alignment of content using the above classes.
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" > w3wiki </ 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 > |
Output:
Example 2: The following code demonstrates the vertical centered alignment of content using the above classes.
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" > w3wiki </ 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 > |
Output:
Example 3: The following code demonstrates the horizontal centered alignment of content using the above classes.
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" > w3wiki </ 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 > |
Output:
Reference: https://www.blazeui.com/utils/alignment
Contact Us