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.
<!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">
w3wiki
</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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.
Tailwind CSS Object Position
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.