はじめに
この実験では、CSS を使ったグリッドの中央配置の概念を探ります。gridレイアウトを使って、親要素内の子要素を水平および垂直方向に中央配置する方法を学びます。この実験が終わるとき、justify-contentおよびalign-itemsプロパティを使って完全に中央配置されたレイアウトを作成する方法を十分に理解しているでしょう。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
グリッドの中央配置
VM 内には既にindex.htmlとstyle.cssが用意されています。
親要素内の子要素を水平および垂直方向に中央配置するには、次の手順に従います。
display: gridを使ってグリッドレイアウトを作成します。justify-content: centerを使って子要素を水平方向に中央配置します。align-items: centerを使って子要素を垂直方向に中央配置します。
以下は、HTML 構造の例です。
<div class="parent">
<div class="child">Centered content.</div>
</div>
そして、対応する CSS です。
.parent {
display: grid;
justify-content: center;
align-items: center;
height: 100px;
}
右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。
まとめ
おめでとうございます！あなたはグリッドの中央配置の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。