vertical-align プロパティ
vertical-align プロパティは、テキストの上下位置を指定するプロパティです。テキストの上付き、下付きと言ったりします。
ただし、<span> や <a> といったインラインエレメントでのみ有効です。
<div> といったブロックエレメントをdisplay:inline;
インラインエレメントへ変更することもできます。display プロパティに関しては display プロパティページを参照してください。
vertical-align: 50%;
親要素のテキストです。vertical-alignの表示例です。
基準より上方向がプラス方向、基準より下方向がマイナス方向です。数値が大きくなれば上に表示されます。小さいほど下に表示されます。
エレメント自体の配置を変更したい場合は、エレメントをブロックレベルにして、position プロパティと、top、bottom、left、right プロパティを組み合わせた方がよいでしょう。
水平方向の配置を設定するには、text-alignプロパティを使います。
ページ内 Index
構文(Syntax)
CSS
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom;
DOM ( JavaScript )
String=object.style.verticalAlign;
object.style.verticalAlign="baseline | length | sub | super | top | text-top | middle | bottom | text-bottom";
値（Values）
| Value | 摘要 |
|---|---|
| baseline | 初期値（default value） |
| length | 数値で設定、デフォルト位置を基準に、プラスで上方向、マイナスで下方向。CSS長さの単位を参照のこと |
| sub | 親エレメントの添字（subscript）位置 |
| super | 親エレメントの上付き（superscript）位置 |
| top | 最も高い位置にあるエレメントの上部 |
| text-top | 親エレメントのフォントの上部 |
| middle | 親エレメントの中心位置より下に |
| bottom | 親エレメントの下部を基準に |
| text-bottom | 親エレメントのフォントの下部 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | baseline |
| 継承（Inherited） | no |
| 変化（Animatable） | yes |
Example
vertical-alignの表示例です。
ブロックエレメントをインラインエレメントに変更し、文字の上下位置を調整します。-50%で半文字分下がります。
関連プロパティ
以下はテキスト配置に関連するプロパティです。
| letter-spacing | 文字間隔 |
| line-height | テキストの行間 |
| overflow-wrap | 単語がエレメント内に入りきらない場合の設定 |
| tab-size | タブのサイズ |
| text-align | 右寄せ、中央寄せ、左寄せ |
| text-align-last | 最後の行の右寄せ、中央寄せ、左寄せ |
| text-combine-upright | 縦書きにおける算用数字（アラビア数字）の配置 |
| text-indent | 最初の行頭の字下げ幅 |
| text-justify | 両端揃えにおける単語、文字の間隔 |
| text-overflow | エレメントからテキストがはみ出る場合の表記 |
| white-space | ホワイトスペース（複数の半角スペース、タブ）や改行の表示方法 |
| word-break | エレメントの領域をはみ出るテキストの折り返し |
| word-spacing | 単語と単語の間の空白を調整 |
| word-wrap | overflow-wrapプロパティの別名 |