Layout

Object Position

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

Quick reference

Class	Description
object-bottom	object-position: bottom
object-center	object-position: center
object-left	object-position: left
object-left-bottom	object-position: left bottom
object-left-top	object-position: left top
object-right	object-position: right
object-right-bottom	object-position: right bottom
object-right-top	object-position: right top
object-top	object-position: top

Basic usage

Positioning a replaced element

Use the object-{side} 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="object-none object-left-top ..." src="..." alt="..." />
<img class="object-none object-top ..." src="..." alt="..." />
<img class="object-none object-right-top ..." src="..." alt="..." />
<img class="object-none object-left ..." src="..." alt="..." />
<img class="object-none object-center ..." src="..." alt="..." />
<img class="object-none object-right" src="..." alt="..." />
<img class="object-none object-left-bottom ..." src="..." alt="..." />
<img class="object-none object-bottom ..." src="..." alt="..." />>
<img class="object-none object-right-bottom ..." src="..." alt="..." />

Applying conditionally

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:object-top to apply the object-top utility at only medium screen sizes and above.

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