object-position

Examples

Positioning a replaced element

Use the object-* utilities to specify how a replaced element's content should be positioned within its container:

object-left-top

object-top

object-right-top

object-left

object-center

object-right

object-left-bottom

object-bottom

object-right-bottom

<img class="size-24 object-none object-left-top ..." src="..." /><img class="size-24 object-none object-top ..." src="..." /><img class="size-24 object-none object-right-top ..." src="..." /><img class="size-24 object-none object-left ..." src="..." /><img class="size-24 object-none object-center ..." src="..." /><img class="size-24 object-none object-right ..." src="..." /><img class="size-24 object-none object-left-bottom ..." src="..." /><img class="size-24 object-none object-bottom ..." src="..." /><img class="size-24 object-none object-right-bottom ..." src="..." />

Referencing a variable

Use the object-position-(<custom-property>) syntax to set the object-position based on a custom property:

<div class="object-position-(--my-object-position) ...">  <!-- ... --></div>

Using a custom value

Use the object-position-[<value>] syntax to set the object-position based on a completely custom value:

<div class="object-position-[25% 75%] ...">  <!-- ... --></div>

Responsive design

Prefix an object-position utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="object-center md:object-top">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

Customizing your theme

Use the --object-position-* theme variables to customize the object position utilities in your project:

@theme {  --object-position-center-bottom: center bottom; }

Now the object-position-center-bottom utility can be used in your markup:

<div class="object-position-center-bottom">  <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.