画像リンクの下に文字を付けたいのですが

質問

画像リンクを複数横に並べ、かつそれぞれの画像の下に文字を表示(それぞれの画像の横幅の範囲内に)させたいのですがどうすればよいでしょうか？
画像と画像の間にスペースを入れることが出来たらなお良いです。

いろいろ調べてみて、
「<div style="float:left"><img src="1.gif"><br>caption 1</div>
<div style="float:left"><img src="2.gif"><br>caption 2</div>
<div style="float:left"><img src="3.gif"><br>caption 3</div>
<div style="clear:both"></div>」
というタグを見つけましたが、これでは画像にリンクがつけられませんし、なぜか画像と画像の間に段が出来てしまいます。

どなたかよろしくお願いします。

回答No.1

Tinte · ベストアンサー

<div style='border: solid #000 1px; float:left; margin: 5px;'>
<a href='' style='border:0px;'>
<img src='image01.jpg' width='200'/>
</a>
<br />
Caption
</div>
<div style='border: solid #000 1px; float:left; margin: 5px;'>
<a href='' style='border:0px;'>
<img src='image02.jpg' width='200'/>
</a>
<br />
Caption
</div><div style='border: solid #000 1px; float:left; margin: 5px;'>
<a href='' style='border:0px;'>
<img src='image03.jpg' width='200'/>
</a>
<br />
Caption
</div><div style='border: solid #000 1px; float:left; margin: 5px;'>
<a href='' style='border:0px;'>
<img src='image04.jpg' width='200'/>
</a>
<br />
Caption
</div>
<br clear='left' />
こんな感じはどうでしょうか？
現在タグに直接スタイルを書き込んでいますが、CSSの外部ファイルに移してしまえばもっとすっきりすると思います。
画像の間の空白はmarginで適当なサイズをとればよいと思います。画像のサイズはwidthで指定します。単位はついていませんがpxです。

お礼

ありがとうございます！！できました！！
教えていただいたタグを少しアレンジして使わせていただきます！
もう一つ質問なのですが、上のタグをセンター表示にすることはできますか？
<center></center>で囲ってみたのですが、何も変わらなくて・・・。

よろしくお願いします。

回答No.2

Tinte

最近xhtmlになってからなかなかcssとの関連で昔からやっている人は扱いづらいものになってきましたよ。
　<center></center>を使わずにやはりブロックで囲ってしまう方がいいみたいです。

前回のタグに以下のもので囲ってみてください。
<div style='margin: 0 auto; padding: 0; width: 900px;'>
(前回の画像のタグ)
</div>

　marginのautoでセンタリングを行っているのですが、センタリングするためにはwidthでモニターの幅よりも狭い幅を指定してあげないとセンタリングの意味がない…というような感じになってます。実際にテストしていませんが確かIEではtext-align:centerでスタイルを指定しないとセンタリングされない…というようなことがあったような。現在は改善されているかもしれません。FireFoxなどでは大丈夫だと思います。

お礼

ありがとうございます。
試してみましたが、仰るようにIEではセンタリングされませんでした；；難しいですね。
ボクの勉強不足なのですがxhtmlって初めて聞きました。
少し勉強してみます。ありがとうございました！