Centering text is a very common requirement in web design, and TailwindCSS offers straightforward solutions to achieve this. In this blog post, You’ll learn two simple methods to center text using TailwindCSS. Whether you need to center text horizontally, vertically, or both, TailwindCSS is here to help you.
Method 1: Using
text-center Class to Horizontally Center Text
If you want to center text horizontally in TailwindCSS, you can simply use the
text-center utility class. Let’s take a look at an example:
This text is in the center
In the example above, a simple
text-center class is used to center the text horizontally. You can check the working example on TailwindCSS playground. The output is attached below in a screenshot.
Method 2: Vertically and Horizontally Centering Text with TailwindCSS
If you need to center the text both vertically and horizontally, TailwindCSS provides a powerful combination of flexbox utility classes. In this case, you can apply the
flex class to create a flex container, and then we use the
items-center classes for centering the text horizontally and vertically within the container. Here is a simple example.
<p class="flex justify-center items-center h-40">
This text is vertically and horizontally center
You can check the working code example and the output is attached below.
Centering text in your web design can significantly enhance the visual appearance and readability of your content. You can achieve this using TailwindCSS with a few lines of code. Here are the 2 simple methods to center a text in TailwindCSS, First is to use the
text-center class for horizontal centering and the second is to utilize the
items-center classes for both vertical and horizontal centering.