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; 屬性。此類將物件放置在其容器的頂部。

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>

列印頁面