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.
<!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@12.2.0/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>
Output:
Example 2: The following code demonstrates the vertical centered alignment of content using the above classes.
<!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@12.2.0/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>
Output:
Example 3: The following code demonstrates the horizontal centered alignment of content using the above classes.
<!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@12.2.0/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>
Output:
Reference: https://www.blazeui.com/utils/alignment/
