vertical-alignというもの

vertical-alignはテキストや画像の縦方向の位置を指定するのに使用します。

サイトの骨格をtableで作る際は、かならず使用するタグであり、前回のサンプルのようにtableで作った空間において、メニューが縦中央に配置してしまっていると思いますが、これを上詰め配置に変えるのによく使います。

あとは、文字の前にワンポイントの画像を配置する時（メニュー）の、画像と文字の縦方向の配置を調整するのに使用します。

tableの上詰めとワンポイント画像の配置の二通りの使用法だけ知っていれば十分でしょう。

使い方は、「vertical-align:○○○;」の○○○に、top（上詰め）、middle（中央）、bottom（下詰め）のどれかを入れるのが普通ですが、画像の大きさによっては、middleにしてもずれることがしばしばあるので、数値指定（px）を使った方がよいかもしれません。

以下の記述をstyle.cssに追加します。

td {
	vertical-align:top;
	}