Semantic-UI Header Variations Text Alignment Variant Last Updated : 16 Feb, 2022 Comments Improve Suggest changes Like Article Like Report 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. Semantic-UI header provides a short summary of content and it offers us different variations of the header, like Dividing, Block, Attached, Floating, Text alignment, colored, and Inverted variants. Here in this article, we will know about the Text alignment variant of the header. Semantic-UI Header Variations Text Alignment Variant Class: right aligned: This class is used to set the alignment to the right.left aligned: This class is used to set the alignment to the left.justified: This class is used to make the text justified.center aligned: This class is used to set the alignment center. Syntax: <div class="ui segment"> <element class="ui Text-Alignment-Variant-Class header"> ... </element> </div> Below examples illustrate the Semantic-UI Header Variations Text Alignment Variant: Example 1: HTML <!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI Header Variations Text Alignment Variant </strong> </center> <br> <div class="ui segment"> <div class="ui segment"> <h3 class="ui right aligned header"> Geeksforgeeks </h3> <h3 class="ui left aligned header"> Geeksforgeeks </h3> </div> </div> </body> </html> Output: Semantic-UI Header Variations Text Alignment Variant Example 2: HTML <!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI Header Variations Text Alignment Variant </strong> </center> <br> <div class="ui segment"> <div class="ui segment"> <h3 class="ui justified header"> A Computer Science Portal for Geeks </h3> <h3 class="ui center aligned header"> Geeksforgeeks </h3> </div> </div> </body> </html> Output: Semantic-UI Header Variations Text Alignment Variant Reference: https://semantic-ui.com/elements/header.html#text-alignment Comment More infoAdvertise with us Next Article Semantic-UI Header Variations Text Alignment Variant S skyridetim Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads 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 2 min read Semantic-UI Segment Text Alignment Variation Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots 2 min read Semantic-UI Header Variations Inverted Variant 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. Semantic-UI header provides a short summary of content and it offers us different var 2 min read Semantic-UI Table 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. It uses a class to add CSS to the elements. Tables are an easy way to organize a lot 3 min read Semantic-UI Divider Variations Clearing Variant Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic-UI Divider is used to create the divide 3 min read Like