1 行または複数行のテキストを垂直方向の中央揃えにする CSS の例

表レイアウトの時代では、セルの垂直方向の中央揃えについてあまり考える必要はありません。1 行のテキストは垂直方向の中央揃えになり、3 行のテキストも垂直方向の中央揃えになります。 WebページのCSSレイアウトを実行し、フォームを変更します。デフォルトでは、テキストはコンテナの上部に配置されます。

以下に示すように:

この場合、テキストを垂直方向の中央に配置するにはどうすればよいでしょうか? 3 つの状況に分けて説明します。

1. 単一行のテキストの場合は、行間隔を使用して問題を解決できます。

行間隔の定義を追加して、テキストの 1 行を垂直方向に中央揃えにする効果を実現します。

2. 複数行のテキストの場合、親コンテナの高さは固定されません。

パディングを使用して問題を解決できます。

コンテナーのパディングを同じ固定値に設定すると、コンテンツが増加するにつれてコンテナーの高さが増加します。

これを使用して、複数行のテキストを垂直方向の中央揃えにします。