Open In App

Tailwind CSS Object Position

Improve
Improve
Like Article
Like
Save
Share
Report

The Tailwind CSS Object Position class accepts more than one value. All the properties are covered as in class form. It is the alternative to the CSS object-position property. This class is used to specify, how an image or video element is positioned with x/y coordinates within its content box. It also controls the replacement of the element’s content positioning within its container.

Object Position Classes

Classes

Descriptions

object-left-top

It is positioned at the left top of the image or video.

object-top

It is positioned at the top of the image or video.

object-right-top

It is positioned at the right top of the image or video.

object-left

It is positioned on the left of the image or video.

object-center

It is positioned at the center of the image or video.

object-right

It is positioned to the right of the image or video.

object-left-bottom

It is positioned at the left bottom of the image or video.

object-bottom

It is positioned at the bottom of the image or video.

object-right-bottom

It is positioned at the right-bottom of the image or video.

Note: All classes are used in the below example.

Example:

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>
    <b>Tailwind CSS Object Position Class</b>
    <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=
        <img title="object-left"
             class="object-none
                    object-left
                    bg-green-200
                    w-24 h-24
                    border-4"
             src=
        <img title="object-left-bottom"
             class="object-none
                    object-left-bottom
                    bg-green-200
                    w-24 h-24
                    border-4"
             src=
 
        <img title="object-top"
             class="object-none
                    object-top
                    bg-green-200
                    w-24 h-24
                    border-4"
             src=
        <img title="object-center"
             class="object-none
                    object-center
                    bg-green-200
                    w-24 h-24
                    border-4"
            src=
        <img title="object-bottom"
             class="object-none
                    object-bottom
                    bg-green-200
                    w-24 h-24
                    border-4"
            src=
 
        <img title="object-right-top"
             class="object-none
                    object-right-top
                    bg-green-200
                    w-24 h-24
                    border-4"
             src=
        <img title="object-right"
             class="object-none
                    object-right
                    bg-green-200
                    w-24 h-24
                    border-4"
             src=
 
        <img title="object-right-bottom"
             class="object-none
                    object-right-bottom
                    bg-green-200
                    w-24 h-24
                    border-4"
             src=
    </div>
</body>
 
</html>


Output: You can hover on the output image, each image will show its object position in the tooltip.



Last Updated : 15 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads