CSSでdiv内を下揃え

質問

CSSでdiv内を下揃えは出来ないものでしょうか?

テーブルを使った時の以下の表現をCSSで表現したいです。
<TABLE border="0" height="200">
<TR>
<TD>ここは上から●pxに画像配置</TD>
</TR>
　<TR>
<TD valign="bottom">ここを下揃えで画像表示</TD>
</TR>
</TABLE>

テーブルならすぐできるのですが…

下揃えの方法があれば教えてください。

回答No.2

noname#83877 · ベストアンサー

レイアウトがまだ把握しきれていませんが・・・
htmlがわからないのでリンク先っぽくしてみます。

<!-- ここに使う画像はロゴ周りだけにトリミングされている -->
<h1 id="HEADER"><img src="" alt="The Invoice…"></h1>

<ul id="NAV">
<li><a href="#"><img src="" alt="Home"></a></li><!--
--><li><a href="#"><img src="" alt="Tour"></a></li><!--
--><li><a href="#"><img src="" alt="Home"></a></li><!--
--><li><a href="#"><img src="" alt="Tour"></a></li><!--
--><li><a href="#"><img src="" alt="Home"></a></li><!--
--><li><a href="#"><img src="" alt="Tour"></a></li><!--
--><li><a href="#"><img src="" alt="Home"></a></li>
</ul>

body {
background:url(image.gif) no-repeat center 0;
}

#HEADER {
padding:10px; /* ロゴ周りに適度な余白 */
}

#NAV {
width:700px;
list-style:none;
}

#NAV li {
display:inline;
}

テーブルとcssのレイアウトの考え方の違いは、セルのように区切って考えない点です。
cssの場合、h1とulの境界は見た目には影響しません。
なぜなら上の例では一番見た目に影響するのはbodyに指定してある背景画像だからです。
背景画像を上手く使えばまるでh1とulがdivに囲まれているような錯覚を受け、ボタンがそのdivの中で下揃えになっているように見えます。
下揃えというよりはh1とulの間に余白が指定してあるだけです。

ちなみに高さがばらばらなメニュー画像の場合、

#NAV img {
vertical-align:bottom;
}

で下揃えになります。

お礼

返答ありがとうございます。

指摘された方法でやってみたいと思います。

回答No.1

noname#83877

<ul>
<li><img src="#" alt=""></li>
<li><img src="#" alt=""></li>
</ul>

ul {
height:200px;
list-style:none;
}

li {
padding-top:20px; /* 画像の上の空白 */
}

こういうのじゃなくてですか？

補足

返答ありがとうございます。

上の画像と下の画像は全く別物です。
(上の画像はタイトル、下の画像は各ページへのリンクボタン)

イメージとしてはこちらのサイトが近いです。
http://invoicemachine.com/home
上の黒い部分で、ボタンが下揃えになっている感じを表現したいです。