Object Position In Tailwind CSS
Tailwind Object Position is a valuable feature that enables you to precisely position images and videos within container.
In this article, we’ll take a closer look at Tailwind Object Position and how you can use it to improve the design and functionality of your website.
You can easily move your media content up, down, left, or right, and even adjust the positioning using exact values.
What is Tailwind Object Position?
Tailwind Object Position is a CSS property that allows you to set the exact position of an image or video within its container.
With Tailwind Object Position, you can move your media content up, down, left, or right, or even position it at a specific point using exact values.
This makes it easy to create custom layouts and designs for your website, and it gives you more control over how your content is displayed.
Tailwind Object Position Classes
| Classes | Overview |
| object-bottom | Used to set the vertical position of an image or video’s content to the bottom center of its container. |
| object-center | This class is used to horizontally and vertically center the content of an image or video within its container. |
| object-left | As a result, the horizontal position of an image or video is set to the center left of its container, while maintaining its aspect ratio. |
| object-left-bottom | This class positions the element’s content at the bottom-left corner of its container. |
| object-left-top | This class is used to position an element’s content to the top-left corner of its container. |
| object-right | This class positions the element’s content at the center right of its container. |
| object-right-bottom | This class positions the element’s content at the bottom-right corner of its container. |
| object-right-top | An element’s content is placed on the top right of its container. |
| object-top | This class specifies that the element’s content should be aligned to the top center of its container. |
Syntax
<element class="object-bottom">...</element>
Using Tailwind Object Position is straightforward and simple.
Here’s how you can use it to position your media content within its container.
The following example illustrates the result of using object-left, object-left-top, object-left-bottom, object-top and object-center classes in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Position class in Tailwind CSS</p>
<div class="flex justify-center">
<img class="object-cover w-48 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div class="bg-gray-300 mx-auto space-y-4 p-2
justify-between items-center grid grid-rows-2 grid-flow-col">
<div class="mt-4">
<p>object-left-top</p>
<img class="object-none object-left-top w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-left</p>
<img class="object-none object-left w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-left-bottom</p>
<img class="object-none object-left-bottom w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-top</p>
<img class="object-none object-top w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-center</p>
<img class="object-none object-center w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
</div>
</body>
</html>
Below example sheds some light on the use of object-right, object-right-top, object-right-bottom and object-bottom classes in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Position class in Tailwind CSS</p>
<div class="flex justify-center">
<img class="object-cover w-48 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div class="bg-gray-300 mx-auto space-y-4 p-2
justify-around items-center grid grid-rows-2 grid-flow-col">
<div class="mt-4">
<p>object-right-top</p>
<img class="object-none object-right-top w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-right</p>
<img class="object-none object-right w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-right-bottom</p>
<img class="object-none object-right-bottom w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-bottom</p>
<img class="object-none object-bottom w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
</div>
</body>
</html>
Tailwind Object Position Benefits
Using Tailwind Object Position can provide several benefits for your website, including:
- You can create unique and custom designs for your website, and you can position your media content exactly where you want it.
- By positioning your media content in a specific way, you can enhance the overall user experience and make your website more engaging and interactive.
- Tailwind Object Position is compatible with all major web browsers, so you don’t have to worry about compatibility issues or limitations.
