CSS初心者です。

サイト制作中に疑問に思ったのですが、イメージを縦並びに3つ並べて
中央に配置する時、あるページに「イメージをブロック要素にする」と書かれてたのですが、それは正しいのでしょうか?初心者の為、悩んでしまいました。

(html上)
<img src="○○" width="200" height="200" alt="○○" />
<img src="○○" width="200" height="200" alt="○○" />
<img src="○○" width="200" height="200" alt="○○" />

(CSS上)
img {
display: block;←ここでブロック要素にする必要がわかりません。
margin: 0 auto 10px;
text-align: center;
}

後、違う質問で凄く初歩的なことなのですが、この「イメージを中央にする」時は「領域で中央に」という考え方は間違いなのでしょうか?

例えば先程のイメージの場所を、そのボックス内全てのものを中央にすると考えた場合、

(html上)
<div id="center">
<img src="○○" width="200" height="200" alt="○○" />
<img src="○○" width="200" height="200" alt="○○" />
<img src="○○" width="200" height="200" alt="○○" />
</div>

(CSS上)
div#center {
margin: 0 auto;
text-align: center;
}

div#center img {
margin-bottom: 10px;
}

と<div>でセンターにしても文法的にはおかしくないんでしょうか??

初心者過ぎてすいません。教えて下さい。宜しくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

#1 Wizard_Zeroです。


※正確には「ブロック要素」ではなく「ブロックレベル要素」でした。すみません。以降この表記で統一します。

中央揃えになったということは、<img>がブロックレベル要素化しているか、<img>の外側にあるブロックレベル要素(divやbody)にtext-align:centerがかかっているとしか思えないです。
ブロックレベル要素にしていない<img>に対してtext-alignを指定する意味はなにもありません。

・<img>に限らず、すべてのインライン要素の水平位置は、その外側にあるブロックレベル要素の水平位置指定に依存する。
・text-alignはブロックレベル要素(※)に対してのみ使用するスタイルでありインライン要素には使用できない(しても意味がない)
・display:blockはインライン要素をブロックレベル要素に変更する。

この3点をおさえておけば、display:blockの記述や<img>を<div>で囲む必要性がわかると思います。

※ブロックレベル要素には<td>や<th>を含むとします。
    • good
    • 0
この回答へのお礼

あっわかりましたっ。

<div>でセンターにしてたから中央に行ってました(゜ー゜;A

<img>だけなら中央に行かないってそういうことだったんですね。

すごく勉強になりました。ありがとうございます。

お礼日時:2009/05/20 22:44

text-alignはブロック要素にしか使えません。

<img>自体はインライン要素なので、displayでブロック要素に変更し、text-alignが反映されるようにしているわけです。

> 中央に配置する時、あるページに「イメージをブロック要素にする」と書かれてたのですが、それは正しいのでしょうか?
正しいといえば正しいですが、個人的にインライン要素をブロック要素に置き換えるのは好きではないので、私なら
<div style="text-align: center"><img~~~ /></div>
としますね。

<div>を使った方法について、文法的におかしくはありませんが、それだと「3枚の絵」が中央そろえで並ぶだけです。イメージのあとに<br />を入れるか、すべてのイメージを<div>で囲むなどしてください。

<div id="center">
<img src="○○" width="200" height="200" alt="○○" /><br />
<img src="○○" width="200" height="200" alt="○○" /><br />
<img src="○○" width="200" height="200" alt="○○" />
</div>

あるいは

<div id="center">
<div><img src="○○" width="200" height="200" alt="○○" /></div>
<div><img src="○○" width="200" height="200" alt="○○" /></div>
<div><img src="○○" width="200" height="200" alt="○○" /></div>
</div>
    • good
    • 0
この回答へのお礼

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

そうですねw<div id="center">の部分のイメージの間空けるの忘れてました。すいません。

それと、<img>を要素変えずにtext-alignで中央に行くんですがこれはどういうことでしょうか??

文法的なもので要素を変えなくてはいけないということで理解すればいいんでしょうか?

お礼日時:2009/05/20 00:00

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング