Tailwind CSS - Vertical Alignment

Tailwind CSS Vertical Alignment 垂直对齐是一组预定义类，用于控制元素在其包含元素或布局内的垂直对齐方式。

Tailwind CSS Vertical Alignment 类

以下是 Tailwind CSS Vertical Alignment 垂直对齐类的列表，其中包含用于控制文本垂直对齐方式的属性。

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>

高级垂直对齐选项

此示例展示了 Tailwind CSS 中的一些高级垂直对齐技巧，使用了 align-text-top、align-text-bottom、align-sub 和 align-super 等类。以下代码展示了这些类如何在结构化布局中精确控制文本的垂直对齐和定位。

示例

<!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>