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.
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Segment Text Alignment Variation</title>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</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.
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Segment Text Alignment Variation</title>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</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