[解決済み】CSSグリッドのセンタリングについて
質問
CSS Gridで簡単なページを作ろうとしています。
私が失敗しているのは、HTMLからそれぞれのグリッドセルにテキストをセンタリングすることです。
コンテンツを別の
div
の内側と外側の両方にあります。
left_bg
と
right_bg
セレクタで選択し、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>
解決方法は？
この回答は大きく2つのセクションに分かれています。
- CSS Gridにおけるアライメントの仕組みを理解する。
- CSS Gridで中央揃えにするための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>
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>
フレックスボックス
グリッドアイテムのコンテンツをシンプルかつ簡単に中央揃えする方法として、フレックスボックスを使用します。
具体的には、グリッドアイテムをフレックスコンテナにします。
この方法には、コンフリクトや仕様違反などの問題はありません。クリーンで有効です。
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/#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
はグリッドアイテムで動作するのでしょうか？
その理由は グリッドフォーマットコンテキスト の場合、項目はブロックレベル要素として扱われる。
は
displayグリッドアイテムの値は ブロック化 : もし 指定されたdisplayを生成している要素のインフロー子要素の グリッドコンテナがインラインレベルの値である場合、その値に計算されます。 ブロックレベルに相当する。
での
ブロックフォーマットコンテキスト
を使用すると、何か
vertical-align
プロパティはもともとそのために設計されたものですが、ブラウザはインラインレベルのコンテナにブロックレベルの要素があることを想定していません。これは無効な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仕様の絶対位置決めに関するセクションはこちらです。
関連
-
[解決済み】WebページでWindows 95のフォントを使用する
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] ボディの背景色が表示されない？
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] CSSの親セレクタはありますか？
-
[解決済み] CSSでcellpaddingとcellspacingを設定する？
-
[解決済み] CSSでテキストや画像の背景を透明にするには？
-
[解決済み] CSSの三角形はどのように機能するのですか？
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか？
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み】#記号のHTML文字実体は何ですか？
-
[解決済み】「選択されたファイルがありません」を変更しました。
-
[解決済み] 絶対位置が機能しない
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする？
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される？
-
[解決済み] HTML5 Canvas 要素でカスタムフォントを使用するにはどうすればよいですか？
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] Bootstrap 4 の mr-auto が正しく動作しない。
-
[解決済み] Visual Studio Code CSSエラー「空のルールセットを使用しないでください」【終了しました