CSSのvertical-alignプロパティの使用例

「vertical-align」というCSSのプロパティは、要素の縦方向の配置を制御するために使われ、テキスト行方向の要素、例えばインライン要素や、表部分セルなどのテキスト基準がある要素に適用されます。

vertical-alignプロパティには様々な値が指定でき、特に一般的に使用される値は次のとおりです。

1. 要素のベースラインは、親要素のベースラインに揃えます。
2. トップ：要素のトップは親要素のトップと揃っています。
3. middle: 要素のセンターが、親要素のセンターに揃う。
4. 一番下：最下部に親要素の最下部と揃える
5. エレメントの最上部が、親エレメント内のテキストの最上部と揃います。
6. ボトムテキスト：要素の底辺を親要素のテキストの一番底部に揃える。

また、vertical-alignプロパティはパーセンテージ、長さの値、キーワードなど、他の値も受け付け、親要素に対する要素の垂直方向のオフセットを指定できます。

vertical-alignプロパティを設定することで、以下の効果を実現できます。

1. 文字と画像を縦に整列させる
2. 複数インライン要素の縦位置揃えを図る。
3. 表のセルの内容の垂直方向の配置を変更します。

なお、vertical-alignプロパティはインライン要素、テキストベースラインを持つテーブルセルなどにのみ有効で、ブロック要素には無効です。