Tailwind object Position

The object-{position} utility class in Tailwind CSS allows you to control the positioning of objects within their containing elements. With Tailwind's object-position class, you can easily adjust the horizontal and vertical position of images, videos, and other objects.

Applying Object Position

To apply a specific object position to an element, you can use the object-{position} utility class, where {position} represents the desired object position. Here are some common values you can use:

• object-bottom: Positions the object at the bottom of its containing element.
• object-center: Positions the object at the center both horizontally and vertically within its containing element.
• object-left: Positions the object at the left edge of its containing element.
• object-left-bottom: Positions the object at the left-bottom corner of its containing element.
• object-left-top: Positions the object at the left-top corner of its containing element.
• object-right: Positions the object at the right edge of its containing element.
• object-right-bottom: Positions the object at the right-bottom corner of its containing element.
• object-right-top: Positions the object at the right-top corner of its containing element.
• object-top: Positions the object at the top of its containing element. Here's an example:

<img src="image.jpg" class="object-top-left" alt="Object positioned at the top left" />
<img src="image.jpg" class="object-top" alt="Object positioned at the top" />
<img src="image.jpg" class="object-right-top" alt="Object positioned at the top right" />

Preview

Responsive Object Position

Tailwind CSS allows you to apply object position classes responsively at different breakpoints. To use responsive object position classes, you can append the breakpoint prefix to the utility class. For example, md:object-right-bottom positions the object at the right-bottom corner starting from the medium breakpoint and above.

<div class="object-center md:object-right-bottom">
  <!-- Content here -->
</div>

In the above example, the object position of the <div> element is set to center by default (object-center), but starting from the medium breakpoint and above, it changes to the right-bottom corner (md:object-right-bottom).

Tailwind CSS Object Position

Windframe Tailwind blocks

Pricing