Semantic-UI Header Variations Text Alignment Variant

Last Updated : 16 Feb, 2022

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>