Tailwind CSS Object Position - GeeksforGeeks

23 Mar, 2022
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.
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:
HTML
<!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-gree-200 w-24 h-24 border-4 my-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      <img        title="object-left"        class="object-none object-left bg-gree-200 w-24 h-24 border-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      <img        title="object-left-bottom"        class="object-none object-left-bottom bg-gree-200 w-24 h-24 border-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">        <img        title="object-top"        class="object-none object-top bg-gree-200 w-24 h-24 border-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      <img        title="object-center"        class="object-none object-center bg-gree-200 w-24 h-24 border-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      <img        title="object-bottom"        class="object-none object-bottom bg-gree-200 w-24 h-24 border-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">        <img        title="object-right-top"        class="object-none object-right-top bg-gree-200 w-24 h-24 border-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">      <img        title="object-right"        class="object-none object-right bg-gree-200 w-24 h-24 border-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">        <img        title="object-right-bottom"        class="object-none object-right-bottom bg-gree-200 w-24 h-24 border-4"        src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    </div>  </body></html>
Output: You can hover on the output image, each image will show its object position in the tooltip.
Tailwind CSS
Tailwind-Layout
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?