テーブル表示を使った垂直と水平の中央揃えを学ぶ

はじめに

この実験では、display: table を使用して子要素を親要素内に中央揃えする方法を学びます。この手法を使うことで、複雑な位置指定や JavaScript を使わずに、垂直方向と水平方向の中央揃えを簡単に実現できます。これは、ウェブサイトやアプリケーションの応答型レイアウトをデザインする際に役立つスキルです。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

テーブル表示による中央揃え

VM 内には既に index.html と style.css が用意されています。

子要素を親要素内で垂直方向と水平方向に中央揃えするには、次の手順に従います。

固定された height と width を持つコンテナ要素を追加します。

<div class="container"></div>

コンテナ要素の中に子要素を追加し、.center のクラスを付与します。

  <div class="center"><span>Centered content</span></div>
</div>

CSS で、コンテナ要素に次のスタイルを適用します。

height と width を望む固定値に設定します。
ボーダーを追加します（任意）。

.container {
  border: 1px solid #9c27b0;
  height: 250px;
  width: 250px;
}

CSS で、子要素に次のスタイルを適用します。

.center 要素を <table> 要素のように振る舞わせるために display: table を使用します。
要素が親要素内の利用可能なスペースを埋めるように height と width を 100% に設定します。
子要素に display: table-cell を使用して、<td> 要素のように振る舞わせます。
子要素に text-align: center と vertical-align: middle を使用して、水平方向と垂直方向に中央揃えします。

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはテーブル表示による中央揃えの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。