Tidadigi Logo

Tailwind CSS Object Position

Class Object Position của Tailwind CSS chấp nhận nhiều giá trị. Tất cả thuộc tính được bao phủ dưới dạng class. Nó là một lựa chọn thay thế cho thuộc tính object-position của CSS. Class này dùng để chỉ định cách một phần tử ảnh/video được định vị bằng tọa độ x/y bên trong hộp nội dung. Nó cũng kiểm soát việc thay thế vị trí nội dung của phần tử bên trong container.

Object Position Classes

Classes

Descriptions

object-left-top

Được định vị ở phía trên bên trái của ảnh hoặc video.

object-top

Được định vị ở phía trên của ảnh hoặc video.

object-right-top

Được định vị ở phía trên bên phải của ảnh hoặc video.

object-left

Được định vị ở bên trái của ảnh hoặc video.

object-center

Được định vị ở chính giữa của ảnh hoặc video.

object-right

Được định vị ở bên phải của ảnh hoặc video.

object-left-bottom

Được định vị ở phía dưới bên trái của ảnh hoặc video.

object-bottom

Được định vị ở phía dưới của ảnh hoặc video.

object-right-bottom

Được định vị ở phía dưới bên phải của ảnh hoặc video.

Note: Tất cả các class được sử dụng trong ví dụ dưới đây.

Example: Ví dụ này minh họa cách sử dụng tất cả các class object position.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <p><b>Tailwind CSS Object Position Class</b></p>

    <div class="bg-green-300 mx-16 space-y-4 p-2
                justify-between grid grid-rows-3 
                grid-flow-col">
        <img title="object-left-top" class="object-none 
                    object-left-top bg-green-200 w-24 
                    h-24 border-4 my-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">

        <img title="object-left" class="object-none 
                    object-left bg-green-200 w-24 h-24 
                    border-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">

        <img title="object-left-bottom" class="object-none 
                    object-left-bottom bg-green-200 w-24 
                    h-24 border-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">

        <img title="object-top" class="object-none 
                    object-top bg-green-200 w-24 h-24 
                    border-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">

        <img title="object-center" class="object-none 
                    object-center bg-green-200 w-24 h-24 
                    border-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">

        <img title="object-bottom" class="object-none 
                    object-bottom bg-green-200 w-24 h-24 
                    border-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">

        <img title="object-right-top" class="object-none
                    object-right-top bg-green-200 w-24 h-24
                    border-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">

        <img title="object-right" class="object-none 
                    object-right bg-green-200 w-24 h-24 
                    border-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">

        <img title="object-right-bottom" class="object-none 
                    object-right-bottom bg-green-200 
                    w-24 h-24 border-4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
    </div>
</body>

</html>

Output: Bạn có thể di chuột qua ảnh đầu ra để xem object position trong tooltip.

tailwind-css-object-position
Last Updated : 20/07/2025