了解如何使用 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 文本与悬停对齐。
<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>