Object Position
Utilities for controlling how a replaced element's content should be positioned within its container.
| Class | Properties |
|---|---|
| .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; |
| .object-center-5 | object-position: 50% 5%; |
| .object-center-10 | object-position: 50% 10%; |
| .object-center-15 | object-position: 50% 15%; |
| .object-center-20 | object-position: 50% 20%; |
| .object-center-25 | object-position: 50% 25%; |
| .object-center-30 | object-position: 50% 30%; |
| .object-center-35 | object-position: 50% 35%; |
| .object-center-40 | object-position: 50% 40%; |
| .object-center-45 | object-position: 50% 45%; |
| .object-center-50 | object-position: 50% 50%; |
| .object-center-55 | object-position: 50% 55%; |
| .object-center-60 | object-position: 50% 60%; |
| .object-center-65 | object-position: 50% 65%; |
| .object-center-70 | object-position: 50% 70%; |
| .object-center-75 | object-position: 50% 75%; |
| .object-center-80 | object-position: 50% 85%; |
| .object-center-85 | object-position: 50% 85%; |
| .object-center-90 | object-position: 50% 90%; |
| .object-center-95 | object-position: 50% 95%; |
| .object-center-100 | object-position: 50% 100%; |
Standard usage
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
Advanced usage
Use .object-center-{y} to specify how an element should be positioned on the y-axis.
.object-center-5
.object-center-10
.object-center-15
.object-center-20
.object-center-25
.object-center-30
.object-center-35
.object-center-40
.object-center-45
.object-center-50
.object-center-55
.object-center-60
.object-center-65
.object-center-70
.object-center-75
.object-center-80
.object-center-85
.object-center-90
.object-center-95
.object-center-100
Variants
By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.