Elements logo

Object position

Utilities for controlling how a replaced element's content should be positioned within its container

Class reference

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;

Usage

Use the .object-{side} utilities to specify how a replaced element’s content should be positioned within its container.

Left Top

example image

Top

example image

Right Top

example image

Left

example image

Center

example image

Right

example image

Left Bottom

example image

Bottom

example image

Right Bottom

example image
<img class="object-none object-left-top w-24 h-24 ..." src="...">
<img class="object-none object-top w-24 h-24 ..." src="...">
<img class="object-none object-right-top w-24 h-24 ..." src="...">
<img class="object-none object-left w-24 h-24 ..." src="...">
<img class="object-none object-center w-24 h-24 ..." src="...">
<img class="object-none object-right w-24 h-24 ..." src="...">
<img class="object-none object-left-bottom w-24 h-24 ..." src="...">
<img class="object-none object-bottom w-24 h-24 ..." src="...">
<img class="object-none object-right-bottom w-24 h-24 ..." src="...">

Responsive

To position an object only at a specific breakpoint, add a {screen}: prefix to any existing object position utility. For example, adding the class md:object-top to an element would apply the object-top utility at medium screen sizes and above.

<img class="object-center md:object-top ..." src="...">

For more information about Elements’ responsive design features, check out the Responsive Design documentation.