graphql
react

Tailwind CSS 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:
html
<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.

html
<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

ClassProperties
object-bottomobject-position: bottom;
object-centerobject-position: center;
object-leftobject-position: left;
object-left-bottomobject-position: left bottom;
object-left-topobject-position: left top;
object-rightobject-position: right;
object-right-bottomobject-position: right bottom;
object-right-topobject-position: right top;
object-topobject-position: top;

Windframe Tailwind blocks

Pricing

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner