Tailwind CSS - Object Position

Previous
Quiz
Next

Tailwind CSS Object-Position is a utility class that provides an effective way of positioning an object within its container.

Tailwind CSS Object Position Classes

The following is the list of Tailwind CSS Object-Position Classes that provides an effective way placing an object within its container.

Class CSS 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;

Functionality of Tailwind CSS Object Position Classes

  • object-bottom: This class replaces the CSS object-position: bottom; property. This class places an object at the bottom of its container.
  • object-center: This class replaces the CSS object-position: center; property. This class places an object at the center of its container both vertically and horizontally.
  • object-left: This class replaces the CSS object-position: left; property. This class places an object at the left of its container.
  • object-left-bottom: This class replaces the CSS object-position: left bottom; property. This class places an object at the left-bottom of its container.
  • object-left-top: This class replaces the CSS object-position: left top; property. This class places an object at the left top of its container.
  • object-right: This class replaces the CSS object-position: right; property. This class places an object at the right of its container.
  • object-right-bottom: This class replaces the CSS object-position: right bottom; property. This class places an object at the right-bottom of its container.
  • object-right-top: This class replaces the CSS object-position: right top; property. This class places an object at the right top of its container.
  • object-top: This class replaces the CSS object-position: top; property. This class places an object at the top of its container.

Tailwind CSS Object Position Class Examples

The following examples will illustrate the Tailwind CSS Object Position class utility.

Object Top Positioning

Here in this example, we will see the usage of the three above mentioned classes, which can be used for top positioning.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Position
    </h2>
    <p class="text-sm">Original Image</p>
    <div class="relative h-48 w-48 bg-gray-200">
        <img src="/static/images/hero.png" />
    </div>
    <br>
    <p class="text-sm">Tailwind CSS object-left-top Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-left-top
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-top Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-top
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-right-top Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-right-top
                border-black border-2 w-24 h-24">
</body>

</html>

Object Center Positioning

Here in this example, we will see the usage of the three above mentioned classes, which can be used for center positioning.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Position
    </h2>
    <p class="text-sm">Original Image</p>
    <div class="relative h-48 w-48 bg-gray-200">
        <img src="/static/images/hero.png" />
    </div>
    <br>
    <p class="text-sm">Tailwind CSS object-left Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-left
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-center Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-center
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-right Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-right
                border-black border-2 w-24 h-24">
</body>

</html>

Object Bottom Positioning

Here in this example, we will see the usage of the three above mentioned classes, which can be used for bottom positioning.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Position
    </h2>
    <p class="text-sm">Original Image</p>
    <div class="relative h-48 w-48 bg-gray-200">
        <img src="/static/images/hero.png" />
    </div>
    <br>
    <p class="text-sm">Tailwind CSS object-left-bottom Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-left-bottom
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-bottom Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-bottom
                border-black border-2 w-24 h-24">
    <p class="text-sm">Tailwind CSS object-right-bottom Class</p>
    <img src="/static/images/hero.png" 
         class="object-none object-right-bottom
                border-black border-2 w-24 h-24">
</body>

</html>
Print Page
Previous
Next