☰

CSS グリッドの中央揃え 質問する

tag-icon • tag-icon html css centering css-grid
CSS グリッドの中央揃え 質問する

CSS グリッドを使用してシンプルなページを作成しようとしています。

私が失敗しているのは、HTML のテキストをそれぞれのグリッド セルの中央に配置することです。

およびセレクターdivの内側と外側の両方で別々の にコンテンツを配置し、いくつかの CSS プロパティを操作してみましたが、効果はありませんでした。left_bgright_bg

どうすればいいですか?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}
<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

ベストアンサー1

この回答には 2 つの主要なセクションがあります。

  1. CSS グリッドでの配置の仕組みを理解します。
  2. CSS グリッドで中央揃えする 6 つの方法。

解決策だけに興味がある場合は、最初のセクションをスキップしてください。

グリッドレイアウトの構造と範囲

グリッド コンテナー内での中央揃えの仕組みを完全に理解するには、まずグリッド レイアウトの構造と範囲を理解することが重要です。

グリッド コンテナーのHTML構造には 3 つのレベルがあります。

  • コンテナ
  • アイテム
  • コンテンツ

これらの各レベルは、グリッド プロパティの適用という点では他のレベルから独立しています。

グリッド コンテナーのスコープは親子関係に制限されます。

つまり、グリッド コンテナーは常に親であり、グリッド アイテムは常に子です。グリッド プロパティはこの関係内でのみ機能します。

グリッドコンテナの子要素を超える子孫はグリッドレイアウトの一部ではなく、グリッドプロパティを受け入れません。（少なくともsubgrid機能が実装され、グリッド アイテムの子孫がプライマリ コンテナーの線を尊重できるようになりました。

以下は、上で説明した構造とスコープの概念の例です。

三目並べのようなグリッドを想像してください。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

ここに画像の説明を入力してください

各セルの中央に X と O を配置します。

したがって、コンテナ レベルで中央揃えを適用します。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

しかし、グリッド レイアウトの構造と範囲のため、justify-itemsコンテナーの中央にはコンテンツではなくグリッド項目が配置されます (少なくとも直接的には)。

ここに画像の説明を入力してください

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}
<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

同じ問題align-items: コンテンツは副産物として中央に配置されますが、レイアウト デザインは失われます。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

ここに画像の説明を入力してください

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}
<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

コンテンツを中央に配置するには、別のアプローチを取る必要があります。グリッド レイアウトの構造と範囲を再度参照すると、グリッド アイテムを親として、コンテンツを子として扱う必要があります。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

ここに画像の説明を入力してください

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}
<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

jsFiddle デモ

CSS グリッドで中央揃えする 6 つの方法

グリッド項目とそのコンテンツを中央に配置する方法は複数あります。

基本的な 2x2 グリッドは次のとおりです。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

フレックスボックス

グリッド項目のコンテンツを中央に配置するシンプルで簡単な方法としては、flexbox を使用します。

具体的には、グリッド アイテムをフレックス コンテナーにします。

この方法には競合や仕様違反などの問題はありません。クリーンかつ有効です。

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}


grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

詳しい説明についてはこの投稿をご覧ください:

グリッドレイアウト

フレックス アイテムがフレックス コンテナーにもなり得るのと同様に、グリッド アイテムもグリッド コンテナーにもなります。このソリューションは、中央揃えがフレックス プロパティではなくグリッド プロパティを使用して行われる点を除いて、上記のフレックス ボックス ソリューションに似ています。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

auto余白

margin: autoグリッド項目を垂直方向と水平方向に中央揃えするために使用します。

grid-item {
  margin: auto;
}


grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

グリッドアイテムのコンテンツを中央に配置するには、アイテムをグリッド（またはフレックス）コンテナにし、匿名アイテムを独自の要素（CSSで直接ターゲットにできないため）、新しい要素に余白を適用します。

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}


grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

ボックス配置プロパティ

autoグリッド項目を配置するために次のプロパティの使用を検討する場合は、上記の余白に関するセクションをお読みください。

  • align-items
  • justify-items
  • align-self
  • justify-self

https://www.w3.org/TR/css-align-3/#プロパティインデックス

text-align: center

グリッドアイテム内でコンテンツを水平方向に中央揃えするには、text-align財産。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

垂直方向の中央揃えの場合はvertical-align: middle機能しないことに注意してください。

これは、vertical-alignプロパティは、インライン コンテナーとテーブル セル コンテナーにのみ適用されます。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

display: inline-gridインライン レベルのコンテナーを確立すると言う人もいるでしょうし、それは正しいでしょう。では、なぜvertical-alignグリッド アイテムでは機能しないのでしょうか?

その理由は、グリッド書式設定コンテキスト、項目はブロックレベル要素として扱われます。

6.1. グリッドアイテムの表示

displayグリッド項目の値はブロック化されます。グリッドコンテナーdisplayを生成する要素のフロー内の子に指定された値がインライン レベルの値である場合、その値はブロック レベルの同等の値として計算されます。

でブロック書式設定コンテキストこのvertical-alignプロパティは元々その目的で設計されているため、ブラウザはインライン レベルのコンテナ内でブロック レベルの要素が見つかるとは想定していません。これは無効な HTML です。

CSS ポジショニング

最後に、グリッドでも機能する一般的なCSSセンタリングソリューションがあります。絶対配置です。

これは、ドキュメント フローから削除する必要があるオブジェクトを中央に配置するのに適した方法です。たとえば、次のような場合です。

position: absolute中央揃えにする要素と、position: relative包含ブロックとして機能する祖先 (通常は親) に設定するだけです。次のようになります。

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

この方法がどのように機能するかについての完全な説明は次のとおりです。

グリッド仕様の絶対配置に関するセクションは次のとおりです。

おすすめ記事