Tailwind CSS - Object Position

Tailwind CSS Object-Position 是一个实用类，它提供了一种在容器内有效定位对象的方法。

Tailwind CSS Object Position 类

以下是 Tailwind CSS Object-Position 类的列表，这些类提供了一种在容器内有效定位对象的方法。

Tailwind CSS 对象位置类的功能

• object-bottom:此类替换 CSS object-position: bottom; 属性。此类将对象放置在其容器的底部。
• object-center:此类替换 CSS object-position: center; 属性。此类将对象放置在其容器的垂直和水平中心。
• object-left:此类替换 CSS object-position: left; 属性。此类将对象放置在其容器的左侧。
• object-left-bottom:此类替换 CSS object-position: left bottom; 属性。此类将对象放置在其容器的左下角。
• object-left-top:此类替换 CSS object-position: left top; 属性。此类将对象放置在其容器的左上角。
• object-right:此类替换 CSS object-position: right; 属性。此类将对象放置在其容器的右侧。
• object-right-bottom:此类替换 CSS object-position: right bottom; 属性。此类将对象放置在其容器的右下角。
• object-right-top:此类替换 CSS object-position: right top; 属性。此类将对象放置在其容器的右下角。
• object-top: 此类替换了 CSS 的 object-position: top; 属性。此类将对象置于其容器的顶部。

Tailwind CSS 对象位置类示例

以下示例将说明 Tailwind CSS 对象位置类的实用功能。

对象顶部定位

在此示例中，我们将了解上述三个类的用法，它们可用于顶部定位。

示例

<!DOCTYPE html>
<html>

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

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Position
    </h2>
    <p class="text-sm">Original Image</p>
    <div class="relative h-48 w-48 bg-gray-200">
        <img src="/static/images/hero.png" />
    </div>
    <br>
    <p class="text-sm">Tailwind CSS object-left-top Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-left-top
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-top Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-top
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-right-top Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-right-top
                border-black border-2 w-24 h-24">
</body>

</html>

对象中心定位

在此示例中，我们将了解上述三个类的用法，它们可用于中心定位。

示例

<!DOCTYPE html>
<html>

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

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Position
    </h2>
    <p class="text-sm">Original Image</p>
    <div class="relative h-48 w-48 bg-gray-200">
        <img src="/static/images/hero.png" />
    </div>
    <br>
    <p class="text-sm">Tailwind CSS object-left Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-left
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-center Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-center
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-right Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-right
                border-black border-2 w-24 h-24">
</body>

</html>

对象底部定位

在此示例中，我们将了解上述三个类的用法，它们可用于底部定位。

示例

<!DOCTYPE html>
<html>

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

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Position
    </h2>
    <p class="text-sm">Original Image</p>
    <div class="relative h-48 w-48 bg-gray-200">
        <img src="/static/images/hero.png" />
    </div>
    <br>
    <p class="text-sm">Tailwind CSS object-left-bottom Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-left-bottom
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-bottom Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-bottom
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-right-bottom Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-right-bottom
                border-black border-2 w-24 h-24">
</body>

</html>