Tailwind CSS Object Position:This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS object-position property. This class is used to specify, how an image or video element is positioned with x/y coordinates within its content box. It also controls the replacement of the element’s content positioning within its container.
Utilities for controlling how a replaced element’s content should be positioned within its container.
Use the object-{side} utilities to specify how a replaced element’s content should be positioned within its container.
Tailwind CSS Object Position
| 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 Position Classes:
- object-left-top: It is positioned at the left top of the image or video.
- object-top: It is positioned at the top of the image or video.
- object-right-top: It is positioned at the right top of the image or video.
- object-left: It is positioned on the left of the image or video.
- object-center: It is positioned at the center of the image or video.
- object-right: It is positioned to the right of the image or video.
- object-left-bottom: It is positioned at the left bottom of the image or video.
- object-bottom: It is positioned at the bottom of the image or video.
- object-right-bottom: It is positioned at the right-bottom of the image or video.
Note: All classes are used in the below example.
Example:
<!DOCTYPE html>
<html>
<head>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<img
title="object-left-top"
class="object-none object-left-top bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
<img
title="object-left"
class="object-none object-left bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
<img
title="object-left-bottom"
class="object-none object-left-bottom bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
<img
title="object-top"
class="object-none object-top bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
<img
title="object-center"
class="object-none object-center bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
<img
title="object-bottom"
class="object-none object-bottom bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
<img
title="object-right-top"
class="object-none object-right-top bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
<img
title="object-right"
class="object-none object-right bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
<img
title="object-right-bottom"
class="object-none object-right-bottom bg-yellow-300 w-24 h-24"
src=
"https://media.how2trick.in/wp-content/uploads/20190807114330/GFG115.png">
</body>
</html>Output:
