CSSでイメージを縦並びに表示する際にブロック要素にする必要はあるのでしょうか？

質問

ＣＳＳ初心者です。

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

(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>でセンターにしても文法的にはおかしくないんでしょうか？？

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

回答No.2

うぃず（@Wizard_Zero） · ベストアンサー

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

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

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

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

※ブロックレベル要素には<td>や<th>を含むとします。

お礼

あっわかりましたっ。

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

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

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

回答No.1

うぃず（@Wizard_Zero）

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

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

<div>を使った方法について、文法的におかしくはありませんが、それだと「３枚の絵」が中央そろえで並ぶだけです。イメージのあとに<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>

お礼

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

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

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

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