Logo
×

Tailwind CSS Object Position

It acknowledges more than one value in tailwind CSS. Every one of the properties is covered as in class form. It is the option in contrast to the CSS object-position property. This class is utilized to indicate, how a picture (image) or video element is situated/positioned with x/y coordinates inside the box of its contents. It additionally controls the substitution of the element's content situating inside its container.

Object Position Classes

  • object-left-top: It is situated at the left top of the picture (image) or video.
  • object-top: It is situated at the (highest) top of the picture or video.
  • object-right-top: It is situated at the right top of the picture or video.
  • object-left: It is situated on the left of the picture or video.
  • object-center: It is situated at the centre point of the picture or video.
  • object-right: It is situated to the right of the picture or video.
  • object-left-bottom: It is situated at the left lower part of the picture or video.
  • object-bottom: It is situated at the lower part of the picture or video.
  • object-right-bottom: It is situated at the right-lower/bottom part of the picture or video.

All classes are utilized in the underneath example:

Code:

<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>Object Position Class - Tailwind CSS </b>
<div class="bg-red-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-red-200 w-24 h-24 border-4 my-4"
src=
"javatpoint logo_image.png">
<img
title="object-left"
class="object-none object-left bg-red-200 w-24 h-24 border-4"
src=
"javatpoint logo_image.png">
<img
title="object-left-bottom"
class="object-none object-left-bottom bg-red-200 w-24 h-24 border-4"
src=
"javatpoint logo_image.png">

<img
title="object-top"
class="object-none object-top bg-red-200 w-24 h-24 border-4"
src=
"javatpoint logo_image.png">
<img
title="object-center"
class="object-none object-center bg-red-200 w-24 h-24 border-4"
src=
"javatpoint logo_image.png">
<img
title="object-bottom"
class="object-none object-bottom bg-red-200 w-24 h-24 border-4"
src=
"javatpoint logo_image.png">

<img
title="object-right-top"
class="object-none object-right-top bg-red-200 w-24 h-24 border-4"
src=
"javatpoint logo_image.png">
<img
title="object-right"
class="object-none object-right bg-red-200 w-24 h-24 border-4"
src=
"javatpoint logo_image.png">

<img
title="object-right-bottom"
class="object-none object-right-bottom bg-red-200 w-24 h-24 border-4"
src=
"javatpoint logo_image.png">
</div>
</body>
</html>

Output:

Tailwind CSS Object Position

Related Topics

Tailwind CSS Align Content

In Tailwind CSS, this class accepts a wide range of values. It's a replacement for the CSS Align Content feature. This class is used to modify the flex-wrap property's behavior....

5 minutes read.

Tailwind CSS Box Sizing

Tailwind CSS Box sizing class acknowledges more than one worth in tailwind CSS. Each property is shrouded as a class structure. It is an option in contrast to the CSS...

2 minutes read.

Tailwind CSS Grid Template Rows

In tailwind CSS, this class accepts multiple values and all properties are covered in class form. It's the CSS grid-template-row property's replacement. It is used to set the number of...

2 minutes read.

Tailwind CSS Space Between

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Space Between property....

4 minutes read.

Tailwind CSS Flex Grow

CSS flexbox is an important element for frontend development; there are two flex-grow options in Tailwind CSS, and all attributes are covered in class form. It is an alternative to...

3 minutes read.

Tailwind CSS Float

The float class acknowledges more than one worth (value) in tailwind CSS. It is an option in contrast to the CSS float property. The float class characterizes the progression of...

4 minutes read.

Tailwind CSS Place Self

The tailwind CSS Place self class accepts a wide range of values. It's a replacement for the CSS Place Items property. This class is used to manage how a single...

4 minutes read.

Tailwind CSS Opacity

This class accepts a lot of value, and all of the properties are covered in class form. We can change the opacity of any element by using this class. The...

1 minute read.

Tailwind CSS Max-Width

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS max-width property. This...

3 minutes read.

Tailwind CSS Stroke

This class accepts a lot of value, and all of the properties are covered in class form. It's the stroke class that goes on top of the SVG element. Stroke...

2 minutes read.

Tailwind CSS Clear

This class acknowledges more than one worth in tailwind CSS. Every one of the properties is canvassed as in class form. It is an option in contrast to the CSS...

5 minutes read.

Tailwind CSS Object Fit

It acknowledges more than one value in tailwind CSS. Every one of its properties is covered as in class form. It is the option in contrast to the CSS object-fit...

4 minutes read.

Tailwind CSS Position

The position class acknowledges more than one value in tailwind CSS. It is an option in contrast to the CSS Position property. This class is utilized for controlling how an...

5 minutes read.

Tailwind CSS Grid Column Start / End

This class accepts multiple values, and all of the properties are covered in class form. It was used as a replacement to the CSS grid-column property in CSS to express...

3 minutes read.

Tailwind CSS Place Items

This class accepts a wide range of values. It's a replacement for the CSS Place Items property. This class is used to manage how things are justified while still being...

4 minutes read.

Tailwind CSS Min-Width

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS min-width property. This...

1 minute read.

Tailwind CSS Container

In Tailwind CSS, a compartment is utilized to fix the maximum width (max-width) of a component to match the min-width of the breakpoint. It comes exceptionally convenient when content must...

2 minutes read.

Tailwind CSS Margin

The margin class accepts a large number of values, and all of the properties are covered in the same way they are in the class form. It's a replacement for...

6 minutes read.

Tailwind CSS Justify Self

The class form goes over the various properties. It's a replacement for the CSS justify-self attribute. This class is used to describe the alignment of content’s position in a CSS...

4 minutes read.

Tailwind CSS Visibility

In tailwind CSS, this class accepts two values. It's a replacement for the CSS visibility property. This class specifies whether an element in a web document is visible or not,...

2 minutes read.