Object position

The object-position property in Tailwind CSS is used to specify the position of an image or video within its container. It accepts the values like:

  • top: The image or video is positioned at the top of its container.
  • bottom: The image or video is positioned at the bottom of its container.
  • left: The image or video is positioned at the left of its container.
  • right: The image or video is positioned at the right of its container.
  • center: The image or video is centered within its container.

Object position property is used together with Object fit, which we learned in the previous lesson. This is what it can look in HTML:

This code will position the image at the left of its container.

Using the example from the previous lesson, it will look like this:

Default position


As you can see the image has been moved to its left edge.

You can also combine these values and create classes like .object-left-bottom. It will apply CSS object-position: left bottom; to the image.

All possible combinations that you can use are presented in the table below:

Value Description
object-top Position at the top
object-center Position at the center
object-bottom Position at the bottom
object-left Position at the left
object-right Position at the right
object-top-left Position at top left corner
object-top-right Position at top right corner
object-bottom-left Position at bottom left corner
object-bottom-right Position at bottom right corner
object-left-top Position at left top corner
object-right-top Position at right top corner
object-left-bottom Position at left bottom corner
object-right-bottom Position at right bottom corner

Now let's use the newly acquired knowledge and improve the carousel in our project.

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.