Bootstrap 5を使用してフォームの要素を縦方向に中央揃えにする方法

基本的なフォームの構造

まずは、シンプルなフォームのHTML構造を考えてみましょう。以下の例では、<tr>タグ内に<th>（ラベル）と<td>（入力フィールド）が配置されています。

<tr>
  <th>日付</th>
  <td>
    <input type="date" class="form-control">
  </td>
</tr>

Flexboxを利用した中央揃え

Flexboxは、一次元のレイアウトを簡単に整理するための強力なツールです。Bootstrap 5 は d-flex クラスを提供しており、これを使うことで、子要素を簡単に横に並べることができます。また、align-items-center クラスを使用することで、要素を縦方向に中央揃えにすることが可能です。

以下の例では、<td>内でFlexboxを使って日付入力フィールドを中央揃えにしています。

<td>
  <div class="d-flex align-items-center h-100">
    <input type="date" class="form-control">
  </div>
</td>

実際の応用例

日付フィールドが存在しない場合のラベルと入力フィールドの中央揃えについて考えてみましょう。以下のコードでは、<th> と <td> を使って、日付選択をきれいに中央揃えにしています。

<tr>
  <th class="align-middle">日付を選択</th>
  <td>
    <div class="d-flex align-items-center h-100">
      <input type="date" class="form-control">
    </div>
  </td>
</tr>

説明

d-flex align-items-center:
Flexbox を用いて、子要素を中央揃えにします。<td>内の日付入力フィールドのラップにこのクラスを適用し、縦方向の中央に位置させます。
h-100:
要素を親の高さいっぱいに伸ばすために使用します。このクラスを使うことで、<td> の高さに合わせて日付フィールドが中央に来るようになります。
align-middle:
このクラスはBootstrapにおいて縦方向の中央揃えを行う際に便利です。<th>タグに適用することで、テキストがセルの中央に来るように調整します。
このコードにより、「日付を選択」のラベルと日付選択フィールドが視覚的にも整理され、一貫性のあるレイアウトが実現されます。