Tailwind で置換された要素をコンテナ内に配置するにはどうすればよいですか?

要素内では次のようになります。

• 「 bg-スカイ-300 ” クラスは、
  コンテナの背景色を空に設定します。
• 「 グリッド ” クラスを使用すると、グリッド レイアウトが有効になります。
• 「 グリッド行-3 ” クラスはグリッド内の行数を 3 に設定します。
• 「 グリッドフロー列 ” クラスは列内のグリッド項目の流れを定義します。
• 「 m-5 」クラスは、コンテナーの周囲に 5 単位のマージンを追加します。
• 「 スペース-y-4 」クラスは、コンテナ内の子 要素間に 4 単位の垂直方向の間隔を追加します。
• 「 p-4 」クラスは、コンテナ内のコンテンツに 4 単位のパディングを追加します。
• 「 間に揃える 」クラスは、コンテナ内の子要素を整列させ、均等に分散します。

要素内:

• 「 オブジェクトなし ” クラスは要素に位置を適用せず、コンテナ内のデフォルトの位置に要素を表示します。
• 「 オブジェクトの左上 」クラスは、 要素をコンテナの左上隅に配置します。
• 「 オブジェクト左 ” クラスは要素をコンテナの左端に配置し、垂直方向の中央に配置します。
• 「 オブジェクト左下 」クラスは、 要素をそのコンテナの左下隅に配置します。
• 「 オブジェクトトップ ” クラスは要素をコンテナの上端に配置し、水平方向の中央に設定します。
• 「 オブジェクト中心 ” クラスは要素をコンテナの中央に配置し、水平方向と垂直方向の中央に配置します。
• 「 オブジェクトの底 ” クラスは要素をコンテナの下端に配置し、水平方向の中央に保持します。
• 「 オブジェクトの右上 」クラスは、 要素をコンテナの右上隅に配置します。
• 「 オブジェクト権 ” クラスは要素をコンテナの右端に配置し、垂直方向の中央に配置します。
• 「 オブジェクト右下 」クラスは要素をコンテナの右下隅に配置します。

出力

上記の Web ページでは、置換されたすべての要素のコンテンツが正常に配置されていることがわかります。

結論

Tailwind のコンテナ内に置換された要素を配置するには、「 オブジェクト-<位置/側面> 」ユーティリティは、画像などの必要な要素とともに使用されます。ユーザーは、置換された要素を配置するために、「object-」ユーティリティで特定の位置または側面、つまり左、右、中央を定義する必要があります。この記事では、Tailwind CSS のコンテナ内に置換された要素を配置する方法を説明しました。