Textual content Align Utilities in Tailwind CSS
As a way to management the alignment of textual content, you could use Tailwind align utility lessons for textual content.
These are:
- text-left text-align: left;
- text-center text-align: middle;
- text-right text-align: proper;
- text-justify text-align: justify;
- text-start text-align: begin;
- text-end text-align: finish;
Allow us to take a look at examples of utilizing these utility lessons in numerous HTML parts.
An instance of aligning textual content centrally in paragraphs
Allow us to begin our demos by aligning the textual content centrally in 5 paragraphs.
Within the paragraphs, we used background colours, width, margin, and text-center class. Moreover, we additionally used peak utilities in paragraphs to point out the place centrally textual content is positioned. Take a look:
The code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
<!DOCTYPE html> <html> <head> <script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique> <h1 class=“text-red-700 text-xl mx-20 font-bold “> Tailwind Align Textual content: Heart </h1> <div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<div class=“max-w-xs w-96”>
<p class=“bg-gray-950 mb-7 leading-9 w-50 align-middle text-white text-center”>Textual content Aligned Centrally</p> <p class=“bg-green-800 mb-7 leading-10 w-60 text-white text-center”>Textual content Aligned Centrally</p> <p class=“bg-red-700 mb-7 leading-[13rem] w-[18rem] text-white text-center”>Textual content Aligned Centrally</p> <p class=“bg-orange-600 mb-7 h-20 w-96 text-white text-center”>Textual content Aligned Centrally </p> <p class=“bg-cyan-500 mb-7 h-20 w-[31rem] text-white text-center text-white”>Textual content Aligned Centrally</p>
</div> </physique>
</html> |
Align textual content proper instance
Within the instance beneath, the textual content within the paragraph is aligned proper through the use of the text-right Tailwind utility class.
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
<!DOCTYPE html> <html> <head> <script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique> <h1 class=“text-red-700 text-xl mx-20 font-bold “> Tailwind Align Textual content: Proper </h1> <div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<div class=“max-w-xs w-96”>
<p class=“bg-gray-950 mb-7 h-8 w-50 align-middle text-white text-right”>Textual content Aligned Proper</p> <p class=“bg-green-800 mb-7 h-10 w-60 text-white text-right”>Textual content Aligned Proper</p> <p class=“bg-red-700 mb-7 h-10 w-[18rem] text-white text-right”>Textual content Aligned Proper</p> <p class=“bg-orange-600 mb-7 h-20 w-96 text-white text-right”>Textual content Aligned Proper </p> <p class=“bg-cyan-500 mb-7 h-20 w-[31rem] text-white text-right”>Textual content Aligned Proper</p>
</div> </physique>
</html> |
Vertically and horizontally middle align textual content instance
Within the first instance, we noticed the textual content is aligned middle the place we used peak for the paragraphs.
Nevertheless, the textual content is aligned prime vertically.
What if we need to align textual content vertically and horizontally centered?
One of many methods could be utilizing the road peak utility lessons for the peak of parts.
Then utilizing the text-center class will make the textual content centered and center vertically.
See the answer and output beneath:
Tailwind Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
<!DOCTYPE html> <html> <head> <script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique> <h1 class=“text-red-700 text-xl mx-20 font-bold “> Tailwind Textual content: Vertically & Horizontally centered </h1> <div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<div class=“max-w-xs w-96”>
<p class=“bg-slate-600 mb-7 leading-9 w-50 align-middle text-white text-center”>Vertically & Horizontally centered</p> <p class=“bg-red-600 mb-7 leading-10 w-60 text-white text-center”>Vertically & Horizontally centered</p> <p class=“bg-yellow-700 mb-7 leading-[13rem] w-[18rem] text-white text-center”>Vertically & Horizontally centered</p> <p class=“bg-emerald-600 mb-7 leading-[9rem] w-96 text-white text-center”>Vertically & Horizontally centered</p> <p class=“bg-sky-500 mb-7 leading-[15rem] w-[31rem] text-white text-center”>Vertically & Horizontally centered</p>
</div> </physique>
</html> |
The instance of utilizing Tailwind CSS textual content align in a desk
On this instance, we used textual content align lessons of Tailwind in an HTML desk.
In <th>, we used text-center utility class.
Within the first desk row with knowledge, we used text-right class. Within the second row, text-left class is used.
Within the final row, we used the text-start class.
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
|
<!DOCTYPE html> <html> <head> <script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique> <h1 class=“text-red-700 text-xl mx-20 font-bold “> Tailwind Align Textual content: Desk </h1> <div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<desk class=“border-collapse border border-green-700 “> <thead> <tr> <th class=“border border-green-700 text-center px-10”>Identify</th> <th class=“border border-green-700 text-center px-10”>Age</th> <th class=“border border-green-700 text-center px-10”>Wage</th> </tr> </thead> <tbody> <tr> <td class=“border border-amber-600 text-right”>Jim</td> <td class=“border border-amber-600 text-right”>35</td> <td class=“border border-amber-600 text-right”>$5000.00</td> </tr> <tr> <td class=“border border-amber-600 text-left”>Anna</td> <td class=“border border-amber-600 text-left”>24</td> <td class=“border border-amber-600 text-left”>$3500.00</td> </tr> <tr> <td class=“border border-amber-600 text-start”>Adams</td> <td class=“border border-amber-600 text-start”>31</td> <td class=“border border-amber-600 text-start”>$4000.00</td> </tr> </tbody> </desk>
</div> </div> </physique>
</html> |
