# Object Position

Set how to position the container's content.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 32 · Edge 79 · Firefox 36 · Safari 10

| Class | Properties | Value |
|-------|------------|-------|
| `op:b` | object-position | `bottom` |
| `op:c` | object-position | `center` |
| `op:l` | object-position | `left` |
| `op:lb` | object-position | `left bottom` |
| `op:lt` | object-position | `left top` |
| `op:r` | object-position | `right` |
| `op:rb` | object-position | `right bottom` |
| `op:rt` | object-position | `right top` |
| `op:t` | object-position | `top` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `op:b` | object-position | `bottom` |
| `op:c` | object-position | `center` |
| `op:l` | object-position | `left` |
| `op:lb` | object-position | `left bottom` |
| `op:lt` | object-position | `left top` |
| `op:r` | object-position | `right` |
| `op:rb` | object-position | `right bottom` |
| `op:rt` | object-position | `right top` |
| `op:t` | object-position | `top` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `op:b` | object-position | `bottom` |
| `op:c` | object-position | `center` |
| `op:l` | object-position | `left` |
| `op:lb` | object-position | `left bottom` |
| `op:lt` | object-position | `left top` |
| `op:r` | object-position | `right` |
| `op:rb` | object-position | `right bottom` |
| `op:rt` | object-position | `right top` |
| `op:t` | object-position | `top` |