「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Object Position

Utilities for controlling how a replaced element's content should be positioned within its container.

Default class reference

Class
屬性
object-bottomobject-position: bottom;
object-centerobject-position: center;
object-leftobject-position: left;
object-left-bottomobject-position: left bottom;
object-left-topobject-position: left top;
object-rightobject-position: right;
object-right-bottomobject-position: right bottom;
object-right-topobject-position: right top;
object-topobject-position: top;

Usage

Use the object-{side} utilities to specify how a replaced element’s content should be positioned within its container.

Left Top

Top

Right Top

Left

Center

Right

Left Bottom

Bottom

Right Bottom

<img class="object-none object-left-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-center bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-bottom bg-yellow-300 w-24 h-24 ..." src="...">

Responsive

To position an object only at a specific breakpoint, add a {screen}: prefix to any existing object position utility. For example, adding the class md:object-top to an element would apply the object-top utility at medium screen sizes and above.

<img class="object-center md:object-top ..." src="...">

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Object Positioning

By default, Tailwind provides nine object position utilities. You can change, add, or remove these by editing the theme.objectPosition section of your Tailwind config.

  // tailwind.config.js
  module.exports = {
    theme: {
      objectPosition: {
        bottom: 'bottom',
        center: 'center',
        left: 'left',
-       'left-bottom': 'left bottom',
-       'left-top': 'left top',
        right: 'right',
        'right-bottom': 'right bottom',
        'right-top': 'right top',
        top: 'top',
+       'center-bottom': 'center bottom'
+       'center-top': 'center top',
      }
    }
  }

Variants

默認情況下, 只有 響應式 的 object position 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 objectPosition 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       objectPosition: ['responsive', 'hover'],
      }
    }
  }

Disabling

如果你不打算在專案中使用 object position 功能,可以在你的設定檔裡的 corePlugins 屬性中將 objectPosition 設定為 false 來停用功能:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     objectPosition: false,
    }
  }