Tailwind CSS - 对象位置

Tailwind CSS 对象位置是一个实用程序类，它提供了一种有效的方法来定位容器内的对象。

Tailwind CSS 对象位置类

以下是Tailwind CSS 对象位置类的列表，它提供了一种有效的方法来放置容器内的对象。

类名	CSS 属性
object-bottom	object-position: bottom;
object-center	object-position: center;
object-left	object-position: left;
object-left-bottom	object-position: left bottom;
object-left-top	object-position: left top;
object-right	object-position: right;
object-right-bottom	object-position: right bottom;
object-right-top	object-position: right top;
object-top	object-position: top;

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; 属性。此类将对象放置在其容器的顶部。

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 对象位置类的实用程序。

顶部定位

在此示例中，我们将看到上述三个类的用法，这些类可用于顶部定位。

示例

Open Compiler

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

中心定位

在本例中，我们将看到上述三个类的用法，这些类可以用于居中定位。

示例

Open Compiler

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

对象底部定位

在本例中，我们将看到上述三个类的用法，这些类可以用于底部定位。

示例

Open Compiler

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

打印页面