cssで画像と文字をまとめて右下に表示する方法

質問

今学校の課題でHTMLとCSSとの役割をはっきりさせたサイトを制作しています。
そこで、質問はタイトルの通りですが、どうやってもうまく表示されません。
画像(背景画像ではない)を右下に表示させようと思ったら
position:absolute;
bottom:YYpx;
right:XXpx;
とすればよく、文字を右下に表示させようと思ったら
text-align:right;
vertical-align:bottom;
とすればよいと思います。(間違いがあったらすみません；；)
しかし、画像とテキストを画像が上、テキストが下の順番で右下に配置しようとすると、テキストに対するCSSが解除(？)されてしまったのか、テキストが左上に表示されてしまいます。
目標としては下の図のようにしたいのですが・・・
-------------------------------------------------html┐
-----------------------------------------------h1┐

　　　　　　　　　　　　　　　　　　　　　　　　　　　┌-----┐
　　　　　　　　　　　　　　　　　　　　　　　　　　　｜画像 ｜
　　　　　　　　　　　　　　　　　　　　　　　　　　　｜　　 ｜
　　　　　　　　　　　　　　　　　　　　　　　　　　　└-----┘
　　　　　　　　　　　　　　　　　　　　　　　　　　　テキスト
-----------------------------------------------h1┘
-------------------------------------------------html┘

また、画像の横位置の中心にテキストの横位置の中心が並べばベストといったかんじです。
編集環境はwindowsXPpro/Dreamweaver CS3、プレビューにはIE7を使用しています。

どなたか解決策をお知りの方がいらっしゃいましたら、ご教授お願いします。

回答No.2

noname#83877 · ベストアンサー

h1にimgを入れるのは問題ないということは置いておいて・・・
まず見た感じhtmlが特殊ですね。
h1にimgとテキストが入っているようなのでマークアップはこんな感じでしょうか？

<h1><img src="image.jpg" alt="" />サイト名</h1>

あまり言及しませんが、htmlとcssの役割を重視するのであれば大抵の場合、h1にaltを指定しないimg要素は入りません。
altを指定していない画像が見出しの意味を持つことが稀です。
もしも特に理由が無ければcssの背景画像で指定した方がいいです。

cssは単純にh1をpositionで指定し、imgをブロック化するだけでいいと思います。

h1 {
width:200px; /* ボックスの幅 */
position:absolute; right:0; bottom:0;
text-align:center;
}
h1 img {
display:block;
}

回答No.3

LOHA

No.1です。
h1タグにはimgタグが入ることもあり得ますね、すみません、訂正しておきます。
ただしimgタグにaltは設定しないとSEO的にも意味がないということですね(そうでなくても普通imgタグにはaltを付けますが)。

ただ、例のようなh1タグ内の右下に画像とテキストを…といったような使い方はしないとは思います。h1タグ内はシンプルな方がいいので。

個人的にそのようなものを作るのなら、<div id="header"><h1>タイトル</h1><img /><p>文字</p></div>といった感じにし、imgの位置をマージンとかで調整するといった方法でやってしまいますね。

回答No.1

LOHA

vertical-alignは文字の上揃え、下揃えとかの設定ができるだけなので、あまり関係ないかと。

というかそもそも<h1>に<img>を入れるのはおかしいと思いますね(h1タグにはインライン要素しか入らないので。まぁimgはグレーゾーンですが。
>HTMLとCSSとの役割をはっきりさせたサイト
なら、ちゃんとHTMLタグの意味を調べてから使わなければダメなのでは？<h1>タグは「1番大きな見出し」ですので、余白を大幅に入れるようなことをするタグではないです。

ということでまぁ無難に<div>にしておいた方がいいでしょう。

>画像とテキストを画像が上、テキストが下の順番で右下に配置しようとす
>ると、テキストに対するCSSが解除(？)されてしまったのか、テキストが
>左上に表示
はおそらく回り込みの問題じゃないかなぁという気がするので(適当ですいません)clearプロパティあたりをいじってみては？

あと、テキストとかは生では表示せずに<p>で囲むなどし、classなどで位置を調整するとかでもできると思います。

以上、なにか参考になっていたら幸いです。

参考URL：

http://rikiy.jp/report/css/20070220.html,http://www.htmq.com/style/clear.shtml