CSSのclass設定で画像を中央に表示させたいのですが・・・・。

質問

現在cssで画像に対してのセンタリングの設定を行っているのですが、何故か上手くいきません。

cssでclassにセンター表示を設定し、そのクラスを適応させると普通は真ん中に表示できますよね？

例えば、
<p class="center">真ん中表示</p>として、cssでcenterにセンタリングの指定を行った場合、きちんとセンターに表示されるのですが、画像のimgに対してclass設定を行っても、反応がありません。

<img src="○○.gif" width="○" hight="○" class="center">という指定を行ってみました。

画像には何か特殊な設定を行わなければならないのでしょうか？classは使うのもではないのでしょうか？

初歩的質問ですが、ご存知の方宜しくお願いします。

回答No.1

osamuy · ベストアンサー

属性text-alignはブロック要素に適用するものですが、imgはインライン要素になります（ブロック要素とは段落単位で、imgは文字単位と思って下さい）。あえて言うなら、横幅120pxの画像を120pxの幅の中でセンタリングしている事になります。
なので、<div>等で囲んでセンタリングするか、CSSで絶対座標（position:absolute）を指定する必要があります。

text-alignを使ってやろうとしているのだとしたらですが。
具体的にどういうCSSを書かれてるのかが不明なので外してるかも。

お礼

ありがとう御座います。

そうなのですか、インライン要素なのですね！
画像は画像でも文字の画像なので、段落として考えて<p></p>で囲むという考えはOKでしょうか？？

出来れば（position:absolute）は使いたくないのです。

回答No.3

UKY

> 画像は画像でも文字の画像なので、段落として考えて<p></p>で囲むという考えはOKでしょうか？？

それは OK です。
画像の alt 属性を忘れずにね。

個人的には center というクラス名がちょっと気になりますが……。(おせっかいかな?)

お礼

ありがとう御座います。

そうなのですか、<p></p>はOKなのですね、ありがとう御座いました！！

>個人的には center というクラス名がちょっと気になりますが……。(おせっかいかな?)

ありがとう御座います。こちらは一応わかり易く書いたのでcenterという表記を使わせていただきました。本番では意味づけされたclass名を使います。

ありがとう御座いました！

回答No.2

komorebi99

おそらくスタイルでtext-align: center; を使用されているのではないかとおもいますが、img要素では適用できません。
<p class="center"><img......></p>
という使い方になります。

お礼

ありがとう御座います。

><p class="center"><img......></p>

この使い方を私も検討しているのですが、画像に<p>って使い方としてどのようなものでしょうか？

普通にみなさん使っておられますか？？というか、正しい使い方なのでしょうか？

質問ばかりですみません。