Tailwind CSS Object Position
Last Updated :
23 Jul, 2025
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
| Positioned at the left top of the image or video.
|
object-top
| Positioned at the top of the image or video.
|
object-right-top
| Positioned at the right top of the image or video.
|
object-left
| Positioned on the left of the image or video.
|
object-center
| Positioned at the center of the image or video.
|
object-right
| Positioned to the right of the image or video.
|
object-left-bottom
| Positioned at the left bottom of the image or video.
|
object-bottom
| Positioned at the bottom of the image or video.
|
object-right-bottom
| Positioned at the right-bottom of the image or video.
|
Note: All classes are used in the below example.
Example: This example demonstrates the use of all object position classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/[email protected]/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: You can hover on the output image, each image will show its object position in the tooltip.
