HTMLのvertical-alignプロパティとtable-row要素の使用方法

まず、vertical-alignプロパティは、要素内のテキストやインライン要素を垂直方向に配置するために使用されます。しかし、このプロパティはテーブルの行要素にも適用することができます。table-row要素の場合、vertical-alignプロパティは行全体の垂直配置に影響を与えます。

vertical-alignプロパティの値として、次のようなオプションがあります:

1. top: 行の上端に要素を配置します。
2. middle: 行の中央に要素を配置します。
3. bottom: 行の下端に要素を配置します。
4. baseline: テキストのベースラインに要素を配置します。

以下に、table-row要素のvertical-alignプロパティの使用例を示します:

<style>
  .table {
    display: table;
  }

  .table-row {
    display: table-row;
    vertical-align: middle;
  }

  .table-cell {
    display: table-cell;
  }
</style>
<div class="table">
  <div class="table-row">
    <div class="table-cell">セル1</div>
    <div class="table-cell">セル2</div>
    <div class="table-cell">セル3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">セル4</div>
    <div class="table-cell">セル5</div>
    <div class="table-cell">セル6</div>
  </div>
</div>

上記のコードでは、.table-rowクラスにvertical-align: middle;を指定しています。これにより、各行のセルが垂直方向に中央に配置されます。

このように、vertical-alignプロパティとtable-row要素を組み合わせることで、テーブルの行要素内の要素を垂直方向に配置することができます。

それぞれの要素とプロパティの詳細な使い方については、公式のHTMLおよびCSSのドキュメントを参照してください。