Blaze UI Alignment Centered Text

Last Updated : 21 Apr, 2022

Blaze UI is a CSS based UI library that provides a great structure for building websites quickly with a scalable and maintainable foundation. In this article, we will learn about the Blaze UI Alignment Centered Text component. This component is used to set the alignment of the text to the center.

Blaze UI Alignment Centered Text Used Class:

u-centered: This class is used to apply the center value to the text-align property.

Syntax:

<div class="u-centered">
    Content
</div>

The below examples will demonstrate this component.

Example 1: In this example, we will write some text and make it aligned to the center.

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">GeeksforGeeks</h1> 
    <h3>Blaze UI Alignment Centered Text</h3> 
    <div class="u-centered"> 
        Hi Geek!! I am Center Aligned 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will center the heading and paragraph tags.

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">GeeksforGeeks</h1> 
    <h3>Blaze UI Alignment Centered Text</h3> 
  
    <h4 class="u-centered">Hi Geek!! I am a heading</h4> 
    <p class="u-centered" style="color:violet"> Hi Geek!! 
        Just look at me. I am a beautiful paragraph!! 
    </p> 
</body> 
  
</html>