Object Position

@include('_partials.class-table', [ 'rows' => [ [ '.object-bottom', 'object-position: bottom;', 'Place the image on the bottom edge.', ], [ '.object-center', 'object-position: center;', 'Place the image in the center.', ], [ '.object-left', 'object-position: left;', 'Place the image on the left edge.', ], [ '.object-left-bottom', 'object-position: left bottom;', 'Place the image on the left bottom edge.', ], [ '.object-left-top', 'object-position: left top;', 'Place the image on the left top edge.', ], [ '.object-right', 'object-position: right;', 'Place the image on the right edge.', ], [ '.object-right-bottom', 'object-position: right bottom;', 'Place the image on the right bottom edge.', ], [ '.object-right-top', 'object-position: right top;', 'Place the image on the right top edge.', ], [ '.object-top', 'object-position: top;', 'Place the image on the top edge.', ], ] ])

Usage

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

@component('_partials.code-sample')

.object-left-top

.object-top

.object-right-top

.object-left

.object-center

.object-right

.object-left-bottom

.object-bottom

.object-right-bottom

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.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@slot('sm')

@slot('md')

@slot('lg')

@slot('xl')

@slot('code')

Customizing

Object Positioning

By default Tailwind provides nine object position utilities. You can change, add, or remove these by editing the theme.objectPosition section of your Tailwind config.

@component('_partials.customized-config', ['key' => 'theme.objectPosition']) bottom: 'bottom', center: 'center', left: 'left',

• 'left-bottom': 'left bottom',
• 'left-top': 'left top', right: 'right', 'right-bottom': 'right bottom', 'right-top': 'right top', top: 'top',

• 'center-bottom': 'center bottom'
• 'center-top': 'center top', @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'object position', 'property' => 'objectPosition', ], 'variants' => ['responsive'], ])