CSSグリッドの中央揃え

Question

私はCSS Gridを使って簡単なページを作成しようとしています。

私がしていないのは、HTMLからそれぞれのグリッドセルにテキストを集中させることです。

私はleft_bgとright_bgセレクターの内側と外側の両方で別々のdivsにコンテンツを配置し、役に立つことがないようにいくつかのCSSプロパティで遊ぶことを試みました。

どうやってこれをするの？

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>

Answer 1

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

1. CSSグリッドで配置がどのように機能するかを理解する。
2. CSSグリッドを中心に配置するための6つの方法。

解決策だけに興味があるなら、最初のセクションを飛ばしてください。

---

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

グリッドコンテナでセンタリングがどのように機能するかを完全に理解するには、まずグリッドレイアウトの構造と範囲を理解することが重要です。

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

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

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

グリッドコンテナのscope）は、親子関係に制限されています。

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

子を超えたグリッドコンテナの子孫は、グリッドレイアウトの一部ではなく、グリッドプロパティを受け付けません。 （少なくとも 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>

完全な説明についてはこの記事を参照してください。

• Flexbox で要素を垂直方向および水平方向に中央揃えする方法

---

グリッドレイアウト

フレックスアイテムをフレックスコンテナにすることができるのと同じ方法で、グリッドアイテムをグリッドコンテナにすることもできます。この解決法は、中心合わせがフレックスプロパティではなくグリッドで行われることを除いて、上記のフレックスボックスソリューションと似ています。

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/#property-index

---

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値はblockified：グリッドコンテナを生成する要素のインフロー子の指定されたdisplayがインラインレベルの値である場合、そのブロック値に計算されます。レベル相当。

vertical-alignプロパティが元々設計されていた ブロックフォーマットcontext では、ブラウザはインラインレベルのコンテナでブロックレベルの要素を見つけることを期待していません。それは無効なHTMLです。

---

CSSポジショニング

最後に、Gridでも機能する一般的な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>

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

• 要素は、特に画面のサイズを変更するときに中央に配置されません

これがGrid仕様の絶対位置に関するセクションです。

• https://www.w3.org/TR/css3-grid-layout/#abspos

Answer 2

あなたはあなたのテキストを中心に置くためにflexboxを使うことができます。ところで、テキストは匿名のフレックスアイテムと見なされるため、追加のコンテナは必要ありません。

flexboxの仕様から ：

flexコンテナ のそれぞれのインフローの子は flex item になり、 flexコンテナ の中に直接含まれる連続したテキストの実行はラップされます。匿名の フレックスアイテム 。ただし、 空白 のみを含む匿名フレックスアイテム（つまり、 white-space プロパティによって影響を受ける可能性のある文字）は、（display:noneの場合と同様に）レンダリングされません。

そのため、グリッドアイテムをフレックスコンテナ（display: flex）として作成し、align-items: centerとjustify-content: centerを追加して垂直方向と水平方向の中央に配置するだけです。

HTMLとCSSの最適化も行いました。

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

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Answer 3

Flexを使用しようとさえしないでください。 CSSグリッドにとどまる！ :)

https://jsfiddle.net/ctt3bqr0/ /

justify-self: center;
align-self: center;

ここでセンタリング作業をしています。

グリッドセルの内側にあるdivの内側にあるものを中心に置きたい場合は、それを機能させるためにネストしたグリッドを定義する必要があります。 （ここに示されている両方の例のフィドルを見てください。）

https://css-tricks.com/snippets/css/complete-guide-grid/

乾杯！

Answer 4

Flexを使ってみてください。

プランカーデモ： https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

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

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

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>