Semantic-UI Segment Text Alignment Variation Last Updated : 09 Mar, 2022 Comments Improve Suggest changes Like Article Like Report 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 bootstrap. Semantic UI provides the user's segment classes to place them on the website and look the segments more beautiful. In this article let us see about the segment text alignment variation: Semantic UI Segment Text Alignment Variations Classes: left: This aligns the text to the left of the segment.right: This aligns the text to the right of the segment.center: This aligns the text to the center of the segment. Syntax: <div class="ui Text-Alignment-Variations-Classes segment"> ... </div> Example 1: The following code demonstrates the segment text alignment variation left and right alignment. HTML <!DOCTYPE html> <html> <head> <title>Semantic-UI Segment Text Alignment Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">Geeksforgeeks</h1> <strong> Semantic-UI Segment Text Alignment Variation </strong> <br/> <br/> <div class=" ui container"> <div class="ui right aligned segment"> Right </div> <div class="ui left aligned segment"> Left </div> </div> </center> </body> </html> Output: Semantic-UI Segment Text Alignment Variation Example 2: The following code demonstrates the segment text alignment variation center alignment. HTML <!DOCTYPE html> <html> <head> <title>Semantic-UI Segment Text Alignment Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Segment Text Alignment Variation </strong> <br/> <br/> <div class=" ui container"> <div class="ui center aligned green inverted segment"> <h4>GeeksforGeeks</h4> </div> </div> </center> </body> </html> Output: Semantic-UI Segment Text Alignment Variation Reference: https://semantic-ui.com/elements/segment.html#text-alignment Comment More infoAdvertise with us Next Article Semantic-UI Segment Text Alignment Variation L lokeshpotta20 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 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 Segment Inverted Variation Semantic UI is an open-source framework that offers a variety of components to make your UI more meaningful. One of them is "Segment". Semantic UI has a segment component to display different sections of relatable content. Users can also display the segments on a dark background. Let us see this var 2 min read Semantic-UI Header Variations Text Alignment 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 Segment Basic Variation Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Segment is a segment is a container used to place contents of the 2 min read Like