スタイルシートでの画像のセンタリング

質問

既出かも知れませんが、探し出せなかったもので、質問させて頂きます。

スタイルシートを独立したファイルとして作成しています。クラス付けしてある画像を左右方向の中央に表示する記述方法を教えて下さい。宜しくお願いします。

回答No.3

partita · ベストアンサー

text-alignというのは、ブロック要素に適用して、その中に含まれる「インライン要素が」中央揃えになります。注意すべきはインライン要素に適用しても意味がないことです。（ただしIE5.5以前は例外です）

※ブロック要素はp、div、td、tableなどで、インライン要素はテキストや画像と思えばいいでしょう。

＞他（多い）のものにもセンタリングが反映してしまって思惑通りになりません

<div><img><br>テキストテキスト</div>だとして、
img {display:block;margin:auto;}
とすると、画像は中央、テキストは左揃えになりませんか？display:blockでimgをブロック要素に変換して、margin:autoはブロック要素を中央にそろえる指定方法です。

もしくは
<div>
<p style="text-align:center;"><img></p>
<p>テキストテキスト</p>
</div>
ですかね。

お礼

有難う御座います！細かくご説明頂き、とても参考になりました。特に「display:block;」にはすごく感動しました。

回答No.2

goldfox

<p>にクラス指定を行う。
p.cent{text-align:center;}
<p class="cent"><img></p>

もしくはl_imageクラスの付いた要素をブロック要素にする。
.l_image{display: block; text-align:center;}

お礼

とても参考になりました。特に「display:block;」にはすごく感動しました。的確なご指導有難う御座います！

回答No.1

partita

<p><img></p>
として

p {text-align:center;}

pでなくとも、div、tdなどでも同様。
imgにクラス付けしてようがしてなかろうが関係ありません。

補足

有難う御座います。重ねての質問で恐縮です。
<img src="image/logo_top.gif" alt="xxxxxx" class="l_image">
に対して、
img.l_image {text-align:center;}
としてみましたが反映されませんでした。おっしゃって頂いた通り<p>等ですると、他（多い）のものにもセンタリングが反映してしまって思惑通りになりません。
{position:absolute;xxxxxx}等はクラスに対して使えたので重宝したのですが、教えて頂いた方法は、クラスに対しては使えないのでしょうか？