テーブルを使用せず、ボックス内で画像・テキストを下揃えで表示する方法

vertical-align属性が適用できるのはインライン要素やテーブルのセルだけですので、それでボックス内の位置は指定できません。しかしtable要素を使用しなくても、次のようにすることで縦方向の位置を制御できます。

実行イメージ

サンプルコード

<div class="frame">
    <img class="image"
         src="sample.gif"
         width="50"
         height="50" />
</div>
HTML 
<style type="text/css">
.frame {
    position: relative;
    width: 100px;
    height: 100px;
}
.image {
    position: absolute;
    bottom: 0;
    left: 25px;
}
</style>
CSS

まず親要素のボックスの位置を基準とするために、position属性でrelativeとします。またwidthとheightでボックスのサイズを明示します。

次に子要素 (ここでは画像) のposition属性でabsoluteを指定して絶対配置として、bottom属性をゼロとしてボックスの下端に合わせています。

参考

HTMLの情報サイトから、まとめて検索