Tailwind CSS 文本对齐 - 如何水平对齐文本

了解如何使用 Tailwind CSS 在网页中水平对齐文本。本文将向您展示如何使用文本对齐实用程序类及其变体。

例子

tailwind css 文本对齐开始、结束、居中、左对齐、右对齐。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Text Alignment Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <p class="text-left">So I started to walk into the water...</p>
    <p class="text-center">So I started to walk into the water...</p>
    <p class="text-right">So I started to walk into the water...</p>
    <p class="text-justify">So I started to walk into the water...</p>
    <p class="text-start">So I started to walk into the water...</p>
    <p class="text-end">So I started to walk into the water...</p>
  </body>
</html>
tailwind css 文本对齐开始、结束、居中、左对齐、右对齐。

 

 

Tailwind CSS 文本与悬停对齐。

<p class="text-left hover:text-center">
  tailwind css hover text alignment 
</p>

Tailwind CSS 响应式文本对齐。

<p class="text-left md:text-center">
    tailwind css responsive text alignment
</p>

#tailwindcss 

Tailwind CSS 文本对齐 - 如何水平对齐文本
1.15 GEEK