Tailwind CSS - 垂直對齊

Tailwind CSS **垂直**對齊是一組預定義的類，用於控制元素在其包含元素或佈局中的垂直對齊方式。

Tailwind CSS 垂直對齊類

下面列出了 Tailwind CSS 垂直對齊類及其控制文字垂直對齊的屬性。

類	CSS 屬性
align-baseline	vertical-align: baseline;
align-top	vertical-align: top;
align-middle	vertical-align: middle;
align-bottom	vertical-align: bottom;
align-text-top	vertical-align: text-top;
align-text-bottom	vertical-align: text-bottom;
align-sub	vertical-align: sub;
align-super	vertical-align: super;

Tailwind CSS 垂直對齊類的功能

**align-baseline:** 將元素的基線與其父元素的基線對齊。
**align-top:** 將元素定位在其父容器的頂部。
**align-middle:** 將元素垂直居中在其父元素內。
**align-bottom:** 將元素定位在其父元素的底部。
**align-text-top:** 將元素文字的頂部與其父元素文字的頂部對齊。
**align-text-bottom:** 將元素文字的底部與其父元素文字的底部對齊。
**align-sub:** 將元素降低到父元素基線的下方。
**align-super:** 將元素提高到父元素基線的上方。

Tailwind CSS 垂直對齊類示例

以下是 **Tailwind CSS 垂直對齊** 類的示例，展示瞭如何在容器內垂直對齊元素。

探索垂直對齊選項

此示例演示了 Tailwind CSS 垂直對齊如何使用 **align-baseline**、**align-top**、**align-middle** 和 **align-bottom** 等類進行垂直對齊。以下程式碼展示了每個類如何影響佈局中文字的垂直位置。

示例

 
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Vertical Alignment
    </h2>
    <div class="grid  space-y-4"> 
        <p class="border border-gray-400 p-2">This text is
            <span class="align-baseline font-bold">
                aligned to the baseline,
            </span>
            after baseline alignment example.
        </p>
        
        <p class="border border-gray-400 p-2">This text is
            <span class="align-top font-bold">
                aligned to the top,
            </span>
            after top alignment example.
        </p>

        <p class="border border-gray-400 p-2">This text is
            <span class="align-middle font-bold">
                aligned in the middle,
            </span>
            after middle alignment example.
        </p>

        <p class="border border-gray-400 p-2">This text is
            <span class="align-bottom font-bold">
                aligned to the bottom,
            </span>
            after bottom alignment example.
        </p>
    </div>
</body>

</html>

高階垂直對齊選項

此示例演示了使用 **align-text-top**、**align-text-bottom**、**align-sub** 和 **align-super** 等類在 Tailwind CSS 中進行一些高階垂直對齊技術。以下程式碼展示了這些類如何精確地控制結構化佈局中文字的垂直對齊和位置。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 "> 
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Vertical Alignment
    </h2>
    <div class="grid space-y-4">
        <p class="border border-gray-400 p-2">This text is
            <span class="align-text-top font-bold">
                aligned to the text top,
            </span>
            after text top alignment example.
        </p>

        <p class="border border-gray-400 p-2">This text is
            <span class="align-text-bottom font-bold">
                aligned to the text bottom,
            </span>
            after text bottom alignment example.
        </p>

        <p class="border border-gray-400 p-2">This text is
            <span class="align-sub font-bold">
                aligned as subscript,
            </span>
            after subscript alignment example.
        </p>
        <p class="border border-gray-400 p-2">This text is
            <span class="align-super font-bold">
                aligned as superscript,
            </span>
            after superscript alignment example.
        </p>
    </div>
</body>

</html>

列印頁面