Blaze UI Alignment Centered Text

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/[email protected]/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/[email protected]/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>

Output:

Reference: https://www.blazeui.com/utils/alignment/#centered-text

Blaze UI Alignment Centered Text

A

akshitsaxenaa09

Improve

Article Tags :

Similar Reads

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 c

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 c

Blaze UI Alignment Centered Absolutely

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 c

Blaze UI Alignment

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 p

Blaze UI Containers Vertical Alignment

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is avai

Blaze UI Alignment Horizontal

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 c

Blaze UI Alignment Vertical

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 c

Bootstrap 5 Cards Text Alignment

A card is a flexible and extensible content container that shows the information overview shortly. We can resize the card container, align text as we want, and add images. We can change the alignment of the text of the card using text align classes. We can change specific entity alignment. We can us

Bulma Vertical Alignment

The Bulma Vertical alignment is used to align your columns vertically, add the is-vcentered modifier to the columns container. Bulma Vertical Alignment Class: is-vcentered: This class is used to center the columns vertically. Syntax: <div class="columns is-vcentered"></div> Example: Belo

Semantic-UI Card Text Alignment Variation

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. The semantic UI Card element displays site content in a manner similar to a playing c