Tailwind CSS Tutorial

Tailwind CSS Tutorial Tailwind CSS Installation

Tailwind CSS Layout

Tailwind CSS Container Tailwind CSS Box Sizing Tailwind CSS Display Tailwind CSS Float Tailwind CSS Clear Tailwind CSS Object Fit Tailwind CSS Object Position Tailwind CSS Overflow Tailwind CSS Position Tailwind CSS Top/Right/Bottom/Left Tailwind CSS Visibility Tailwind CSS Z-index

Tailwind CSS Flex Box

Tailwind CSS Flex Direction Tailwind CSS Flex Wrap Tailwind CSS Flex Tailwind CSS Flex Grow Tailwind CSS Flex Shrink Tailwind CSS Order

Tailwind CSS Grid

Tailwind CSS Grid Template Columns Tailwind CSS Grid Column Start End Tailwind CSS Grid Template Rows Tailwind CSS Grid Row Start End Tailwind CSS Grid Auto Flow Tailwind CSS Grid Auto Columns Tailwind CSS Grid Auto Rows Tailwind CSS Gap

Tailwind CSS Alignment

Tailwind CSS Justify Content Tailwind CSS Justify Items Tailwind CSS Justify Self Tailwind CSS Align Content Tailwind CSS Align Items Tailwind CSS Align Self Tailwind CSS Place Content Tailwind CSS Place Items Tailwind CSS Place Self

Tailwind CSS Spacing

Tailwind CSS Padding Tailwind CSS Margin Tailwind CSS Space Between

Tailwind CSS Sizing

Tailwind CSS Width Tailwind CSS Min-Width Tailwind CSS Max-Width Tailwind CSS Height Tailwind CSS Min-Height Tailwind CSS Max-Height

Tailwind CSS Effects

Tailwind CSS Box Shadow Tailwind CSS Opacity

Tailwind CSS SVG

Tailwind CSS Fill Tailwind CSS Stroke Tailwind CSS Stroke Width

Tailwind CSS Object Position
2022-03-24 15:29:25

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