Foundation CSS Typography Helpers Text Alignment
Last Updated :
24 Feb, 2022
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
The Foundation CSS helper classes allow us to scaffold certain typographic styles faster. Foundation CSS has multiple typography helpers such as Text Alignment, Subheader, Lead Paragraph, Unbulleted List, and Typescale. In this article, we will learn about the Text Alignment Typographic helper.
The Foundation CSS Text Alignment typographic helper changes the text alignment of a block of text. To change the text alignment of a block of text in Foundation CSS, we use the .text-left, .text-right, .text-center or .text-justify classes. These classes can be applied to any tag with a text block content i.e. <div>, <span> or <h1> tags.
Foundation CSS Text Alignment Typographic Helper Classes:
- text-left: This class aligns the text to the left margin.
- text-right: This class aligns the text to the right margin.
- text-center: This class aligns the text to the center of the block.
- text-justify: This class justifies the block of text.
Syntax:
<div class="text-left/right/center/justify">Content</div>
Example 1: The following example demonstrates all the Text Alignment typographic helper classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>
Foundation CSS Text Alignment
Typographic Helper
</strong>
<br/><br/>
<p class="text-left">
This is left aligned text.
</p>
<p class="text-right">
This is right aligned text.
</p>
<p class="text-center">
This is center aligned text.
</p>
</body>
</html>
|
Output:
Foundation CSS Typography Helpers Text Alignment
Example 2:The following example demonstrates all the Text Alignment typographic helper classes in a card element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>
Foundation CSS Text Alignment
Typographic Helper
</strong>
<br/><br/>
<div class="ui card"
style="max-width: 400px; padding:20px">
<div class="content">
<h4 class="text-left">GeeksforGeeks</h4>
<div class="text-center">
<strong>
Computer Science portal
</strong>
</div>
<div class="text-justify">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles.
</div>
<div class="text-right">Priyank</div>
</div>
</div>
</body>
</html>
|
Output:
Foundation CSS Typography Helpers Text Alignment
Reference: https://get.foundation/sites/docs/typography-helpers.html#text-alignment
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...