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:** 将元素提高到父元素基线的上方。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 垂直对齐类示例

以下是 **Tailwind CSS 垂直对齐** 类的示例，展示了如何在容器内垂直对齐元素。

探索垂直对齐选项

此示例演示了 Tailwind CSS 垂直对齐如何使用 **align-baseline**、**align-top**、**align-middle** 和 **align-bottom** 等类进行垂直对齐。以下代码展示了每个类如何影响布局中文本的垂直位置。

示例

Open Compiler

 
<!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 中进行一些高级垂直对齐技术。以下代码展示了这些类如何精确地控制结构化布局中文本的垂直对齐和位置。

示例

Open Compiler

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

打印页面