CSSで画像を上下中央に配置する方法を教えてください。

はじめまして。
現在、CSSを使ってホームページを作っているんですが、CSSの枠内に画像とテキストを一列に連続して挿入する場合、テキスト部分がどうしても画像の下の部分合わせて配置されます。

これをなんとかして画像の真ん中にテキストを配置させたいのですが、可能でしょうか？

また、まだまだ初心者でCSSの仕組みをよく理解していないのですが、基本的にはCSSというのはdivでboxを作ってそれを配置していくもの理解しています。
ただ、今の私の知識ではdivの中にかなり多い数のdivが挿入されていて、あまりきれいな状態とは言えないような感じなのですが・・・

なにか勘違いしているんでしょうか？

No.4 回答者： 123isao 回答日時： 2007/12/09 12:21

テキストは抜きにして画像をCSSだけで中央に表示させるにはまずPOSITION: absoluteを使い、top:50%、left:50%として画像の左上部分を中央表示させます。

heightとwidthは画像の大きさを入れます。次に画像の半分だけずらずためにmargin-top、margin-leftで画像の半分の大きさだけ-の単位を付けてずらします。

縦400横600の画像なら、
height:400px;
width:600px;
position:absolute;
top:50%
left:50%
margin-top:-200px;
margin-left:-300px;のようにします。

No.3 回答者： noname#66720 回答日時： 2007/12/09 10:26

画像の高さと同じ値をline-heightで指定するとテキストが画像の真ん中にくるはずです。

divなしでも大抵のことはかのうです。参考サイトのはdivを使わずに作られています。
ただ管理の面から考えると多少使ったほうがまとまるので、そのあたりの線引きは個人次第ということでしょうか。

参考URL：http://adp.daa.jp/archives/000309.html

No.2 回答者： steel_gray 回答日時： 2007/12/08 11:56

画像とテキストの縦方向の関係を調整をするには vertical-align というプロパティがあります。

例
テキスト<img style="vertical-align:middle">テキスト

参考
http://www.htmq.com/style/vertical-align.shtml

この回答へのお礼

ありがとうございます。
参考サイトもいろいろこれからの勉強に使わせていただきます。

本当にありがとうございました！

お礼日時：2007/12/08 21:08

No.1 回答者： hiyokko7 回答日時： 2007/12/08 11:24

画像に回りこみ（float属性）を指定すれば、テキストを画像の横に表示できますよ。

回りこみを指定したいページ、もしくは外部cssファイルに以下のコードを追加してください。

img { float:left; } /* 画像を左側に回りこみ */

画像を右側に回りこませたい時は"left"の部分に"right"と書いてください。ちなみにテーブルを使えば画像に回りこみを指定しなくても簡単に上と同じことを実現できちゃいます。

この回答へのお礼

ありがとうございます。
早速試してみます！


floatにはそんな使い方もあるんですね・・・

本当にありがとうございました！

お礼日時：2007/12/08 21:02