Object position

Syntax

Class
Properties
object-{xPosName}
object-position: {xPosName};
object-{yPosName}
object-position: {yPosName};
object-{xPosName}-{yPosName}
object-position: {xPosName} {yPosName};
object-{yPosName}-{xPosName}
object-position: {yPosName} {xPosName};
object-pos-{xPos}-{yPos}
object-position: {xPos} {yPos};

Parameters

xPosName
left | center | right

Horizontal object position.

yPosName
top | center | bottom

Vertical object position.

xPos
<length-percentage default-unit=1%>

Horizontal object position.

yPos
<length-percentage default-unit=1%>

Vertical object position.

<img class="t1 w-256 h-256 bg-c-white shadow-4 object-none object-center" src="/assets/tree-w320.jpg?o1-cache=1">

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Use object-center
t1 object-center
.t1.object-center { object-position: center; }
Use object-top
t1 object-top
.t1.object-top { object-position: top; }
Use object-right-top
t1 object-right-top
.t1.object-right-top { object-position: right top; }
Use object-top-right
t1 object-top-right
.t1.object-top-right { object-position: top right; }
Use object-right
t1 object-right
.t1.object-right { object-position: right; }
Use object-right-bottom
t1 object-right-bottom
.t1.object-right-bottom { object-position: right bottom; }
Use object-bottom-right
t1 object-bottom-right
.t1.object-bottom-right { object-position: bottom right; }
Use object-bottom
t1 object-bottom
.t1.object-bottom { object-position: bottom; }
Use object-left-bottom
t1 object-left-bottom
.t1.object-left-bottom { object-position: left bottom; }
Use object-bottom-left
t1 object-bottom-left
.t1.object-bottom-left { object-position: bottom left; }
Use object-left
t1 object-left
.t1.object-left { object-position: left; }
Use object-left-top
t1 object-left-top
.t1.object-left-top { object-position: left top; }
Use object-top-left
t1 object-top-left
.t1.object-top-left { object-position: top left; }
Position provided as percentage.
t1 object-pos-10%-20%
.t1.object-pos-10\%-20\% { object-position: 10% 20%; }
Position provided in px units.
t1 object-pos-10px-20px
.t1.object-pos-10px-20px { object-position: 10px 20px; }
Units must be provided when providing position in numeric form
t1 object-pos-10-20
Error: invalid arguments passed to utility function [object-pos] in [object-pos-10-20] invalid arguments passed to utility function [object] in [object-pos-10-20]