The Tailwind CSS Object Position class accepts more than one value. 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.
Object Position Classes
Classes |
Descriptions |
---|---|
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" >
< h1 class = "text-green-600 text-5xl font-bold" >
GeeksforGeeks
</ h1 >
< b >Tailwind CSS Object Position Class</ b >
< div class="bg-green-300
mx-16
space-y-4
p-2
justify-between
grid grid-rows-3
grid-flow-col">
< img title = "object-left-top"
class="object-none
object-left-top
bg-green-200
w-24 h-24
border-4 my-4"
src =
< img title = "object-left"
class="object-none
object-left
bg-green-200
w-24 h-24
border-4"
src =
< img title = "object-left-bottom"
class="object-none
object-left-bottom
bg-green-200
w-24 h-24
border-4"
src =
< img title = "object-top"
class="object-none
object-top
bg-green-200
w-24 h-24
border-4"
src =
< img title = "object-center"
class="object-none
object-center
bg-green-200
w-24 h-24
border-4"
src =
< img title = "object-bottom"
class="object-none
object-bottom
bg-green-200
w-24 h-24
border-4"
src =
< img title = "object-right-top"
class="object-none
object-right-top
bg-green-200
w-24 h-24
border-4"
src =
< img title = "object-right"
class="object-none
object-right
bg-green-200
w-24 h-24
border-4"
src =
< img title = "object-right-bottom"
class="object-none
object-right-bottom
bg-green-200
w-24 h-24
border-4"
src =
</ div >
</ body >
</ html >
|
Output: You can hover on the output image, each image will show its object position in the tooltip.