Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has excellent different elements to use to make your website look more impressive. This framework allows us to use various of its styles and properties to create a website more user-friendly.
Blaze UI provides the alignment feature to any element or text. The Blaze UI Alignment is used to position elements and control the amount of space between and around them. The objects can be aligned horizontally or vertically.
Blaze UI Alignment types:
- Centered: This alignment place the content at the center horizontally and vertically.
- Vertical: This alignment place the content at the center vertically.
- Horizontal: This alignment place the content at the center horizontally.
- Centered Absolutely: This alignment place the content at the center of a relative container.
- Centered Text: This alignment place the text at the center.
Blaze UI Alignment Classes:
- u-center-block: This class is used to set the block which holds the content.
- u-center-block__content: This class is used to add the content in the block.
- u-center-block__content–vertical: This class is used to set the position of the content in the center vertically.
- u-center-block__content–horizontal: This class is used to set the position of the content in the center horizontally.
- u-absolute-center: This class is used to set the position of an element perfectly in the center of a relative container.
- u-centered: This class is used to set the alignment of the text in the center.
Syntax:
<div class="u-center-block ...">
<div class="u-center-block__content ...">...</div>
</div>Example 1: The following code demonstrates the Blaze UI Alignment using the Blaze UI Alignment properties.
<!DOCTYPE html> <html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="u-center-block fixed-height-demo">
<div class="u-center-block__content">
Blaze UI Center Alignment
</div>
</div>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Blaze UI Vertical Alignment using the Blaze UI Alignment properties.
<!DOCTYPE html> <html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;"> GeeksforGeeks </h1>
<div class="u-center-block fixed-height-demo">
<div class="u-center-block fixed-height-demo">
<div class="u-center-block__content
u-center-block__content--vertical">
Blaze UI Vertical Center Alignment
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 3: The following code demonstrates the Blaze UI Horizontal Alignment using the Blaze UI Alignment properties.
<!DOCTYPE html> <html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;"> GeeksforGeeks </h1>
<div class="u-center-block fixed-height-demo">
<div class="u-center-block fixed-height-demo">
<div class="u-center-block__content
u-center-block__content--horizontal">
Blaze UI Horizontal Center Alignment
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 4: The following code demonstrates the Blaze UI Absolute Center Alignment using the Blaze UI Alignment properties.
<!DOCTYPE html> <html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;"> GeeksforGeeks </h1>
<div class="u-center-block fixed-height-demo">
<div class="u-center-block fixed-height-demo">
<div class="u-absolute-center">
Blaze UI Centered Absolutely
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 5: The following code demonstrates the Blaze UI Centered Text Alignment using the Blaze UI Alignment properties.
<!DOCTYPE html> <html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;"> GeeksforGeeks </h1>
<div class="u-center-block fixed-height-demo">
<div class="u-centered">
Blaze UI Centered Text
</div>
</div>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/utils/alignment/