スーパー中央揃え
要素を親内の中央に配置するには、place-items: center
を使用します。
まず、表示メソッドとして grid を指定してから、同じ要素に place-items: center
を書き込みます。place-items
は、align-items
と justify-items
の両方を一度に設定するための短縮形です。center
に設定すると、align-items
と justify-items
の両方が center
に設定されます。
.parent {
display: grid;
place-items: center;
}
これにより、固有のサイズに関係なく、コンテンツを親の中央に完全に配置できます。
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2023-10-25 UTC。
[null,null,["最終更新日 2023-10-25 UTC。"],[],[]]