Object Position

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
  className="object-none **object-left-top** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>
<img
  className="object-none **object-top** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>
<img
  className="object-none **object-right-top** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>
<img
  className="object-none **object-left** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>
<img
  className="object-none **object-center** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>
<img
  className="object-none **object-right** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>
<img
  className="object-none **object-left-bottom** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>
<img
  className="object-none **object-bottom** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>
<img
  className="object-none **object-right-bottom** bg-yellow-300 w-24 h-24 ..."
  src="..."
/>