この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。
CSSにはvertical-align（垂直方向の位置揃え）というプロパティがあります。これは初めて説明を受ける時には少し分かり難いかと思いますので、ここで取り上げてみたいと思います。基本的な記述方法は下記のようになります：
img {
vertical-align: middle;
}
ここではimg要素に対して、垂直方向の位置揃えを適用させています。画像は通常インライン要素なので、問題ない限り、テキストに対して正にきっちりインラインに整列されます。けれども「インラインに整列される」とは一体どういう意味なのでしょう。ここでvertical-align（垂直方向の配置）の出番です。
vertical-alignの有効な値には baseline、sub super、top、text-top、middle、bottom、text-bottom、length、value in percentageがあります。
私が思うに、ここでややこしいのがvertical-alignをブロック要素で使おうとして、思うような結果が出ず困ってしまう方が多いのではないかということです。もしdiv要素（親）の中でdiv要素（子）を使用し、子div要素内で垂直方向設定をしようとしても、うまくいきません。ダグラス・ヘリオットさんがlost in the WoodsというWEBサイト内でとても分かりやすく説明しています。
Baseline
もし何も宣言しなかった場合、vertical-alignのデフォルトはbaselineです。画像はテキストのベースライン上にテキストと並んで配置されます。アルファベットにはデセンダーと言って、jやpやyのようにベースラインより下にはみ出す文字があることを忘れないようにしましょう。デセンダー文字の下のはみ出した部分はベースラインではないので、画像はそういったデセンダーの下辺に揃うことはありません。
Middle
アイコンサイズの画像の場合、vertical-alignで最も使用度が高いのはmiddleでしょう。これはどのブラウザでも大抵同じような結果になります：
ブラウザはテキストの高さと画像の高さをうまいこと調整して、センタリングしてくれます：
ここで気を付けておきたいのが、もし画像のサイズが文字サイズより大きかった場合、後ろに続く行を下に押しやってしまうことがあります：
Text-bottom
text-bottomはbaselineと異なり、テキストの下辺はディセンター文字の下に降りた部分になります。そのためtext-bottomの場合は画像もその下端を基準にして配置されます：
Text-top
text-bottomとは反対にtext-topは現在のフォントサイズの一番高い場所を基準とします。なので、その上端を基準として配置することが可能です。Georgiaというフォントタイプの場合は他のフォントよりも背が高い文字もあるので気を付けておきましょう。
Top&Bottom
topとbottomもtext-topやtext-bottomと同じような働きをします。しかし今回はテキストの上辺や下辺ではなく、他の画像などその行に存在するもの中で一番上端や下端を基準とします。例えば同じ行に2つ画像があったとして2つともサイズは違えど、テキストよりも背が高かった（もしくは足が長かった）とします。その場合はテキストの上下辺は関係なく、その行内で最も高い上端（もしくは下端）に揃えて配置されます。
Sub ＆ Super
これらの値はsuperscriptとsubscriptを略したものです。日本語だと上付き文字と下付き文字ですね。その言葉の通り以下の画像のように、上付き文字か下付き文字の位置に配置されます：
テーブとVertical Align
テーブルセルの場合は画像配置と異なり、middleがデフォルト値となります：
もしセル内に余白がありテキストを上寄せもしくは下寄せしたい場合は、topやbottomを使うことが出来ます：
テーブルセル内でvertical-alignを使用する場合は、topかbottom、middleのいずれかを使用することだけ考えればいいかと思います。その他の値は全く道理にかなわず、予測不可能な結果をそれぞれのブラウザで表示させます。例えばIE6でtext-bottomを設定してもbottomとして扱われ、Safari4ではtopとして扱われてしまいます。sub設定の場合は、IE6ではmiddleとして処理され、Safari4ではtopとして処理されてしまいます。
Vertical Align and Inline-Block
画像は技術的にはインライン・レベル要素ですが、実際にはインライン・ブロック要素のような動きをします。その他のインライン要素とは異なり、幅や高さを設定することが可能です。
インライン・ブロック要素はvertical-align設定をされた画像と同じような動きをするので、上記を参照してみてください。しかしどうせ全てのブラウザで同じようにインライン・ブロック要素が配置されるとは限らないのでvertical-alignに関してはあまり心配する必要もないかと思います。まぁそれはまた別の話になってしまうのですが・・・。
valign
たまに垂直方向の位置揃えの為に、valignを使用しているのを見ることがあります（例：<td valign=top>）。この属性は廃止されつつあるので使わない方がよいと言うことを、覚えておいた方がよいでしょう。いずれにせよCSSで設定出来るので、わざわざvalignを使う理由も特にないのではないでしょうか。
