Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Object Position

  • Last Updated : 05 Feb, 2021

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
      <img
        title="object-left"
        class="object-none object-left bg-gree-200 w-24 h-24 border-4"
        src
      <img
        title="object-left-bottom"
        class="object-none object-left-bottom bg-gree-200 w-24 h-24 border-4"
        src
  
      <img
        title="object-top"
        class="object-none object-top bg-gree-200 w-24 h-24 border-4"
        src
      <img
        title="object-center"
        class="object-none object-center bg-gree-200 w-24 h-24 border-4"
        src
      <img
        title="object-bottom"
        class="object-none object-bottom bg-gree-200 w-24 h-24 border-4"
        src
  
      <img
        title="object-right-top"
        class="object-none object-right-top bg-gree-200 w-24 h-24 border-4"
        src
      <img
        title="object-right"
        class="object-none object-right bg-gree-200 w-24 h-24 border-4"
        src
  
      <img
        title="object-right-bottom"
        class="object-none object-right-bottom bg-gree-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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :