ベストアンサー

スタイルシートで画像を中央によせる方法

2004/04/18 22:08

<center> <img src="image.gif"> </center> みたいなことをスタイルシートでしたいのですがどのようにすればよいでしょうか <img style="xxxx" src="image.gif"> などの方法でセンタリングできる方法を教えてください。

noname#32059

HTML
回答数3
ありがとう数7

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

elttac
ベストアンサー率70% (592/839)

2004/04/18 22:17 回答No.1

　ブロック（段落のような文書中の単位）の中に画像が含まれるものとします。すると，対応する HTML コードは， <div><img src="image.gif" alt="..."></div> （ここで，alt 属性は必須なので省略してはいけません）となります。さて，この div ブロックを，「図」というグループに仕立て上げます。 <div class="figure"><img src="image.gif" alt="..."></div> そして，この「figure」というグループでは，「中身はセンタリング」と定義します。 div.figure { text-align: center } これを style 要素か外部のファイルに書いて取り込んで適用させます。　スタイルシートの詳しい書法は，参考 URL のサイトをご覧ください。

参考URL：: http://www.tg.rim.or.jp/~hexane/ach/

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

s_hukami
ベストアンサー率66% (98/148)

2004/04/22 13:06 回答No.3

IMGタグはインライン要素のため、通常の方法では直接スタイルシートで中央寄せすることはできません。先に回答していらっしゃる方の方法ではなく、どうしても単体で中央寄せしたいということでしたら、該当のIMGタグに例えば ======================== <img src="image.gif" style="display:block;margin-left:auto;margin-right:auto;text-align:center;"> ======================== などと記述してみてください。が、スタイルシートを利用するなら<head>～</head>内に ======================== <style type="text/css"> .centering{ display:block; margin-left:auto;margin-right:auto; text-align:center; } </style> ======================== と記述し ======================== <img src="image.gif" class="centering"> ======================== とするのがスマートでしょう。ただし、この場合、指定のIMGタグはブロック要素扱いになるので、隣に字や別の画像などを表示することはできません。もし、表示したいならば、スタイルシートに「float:left;」を追加してください。なお、この回り込みを解除する場合には、解除したい場所に「clear:left」と記述してください。参考URLは「とほほのWWW入門」です。 HTMLやCSSのリファレンスには最適です。 HTMLやCSSに馴れないうちは使いにくいサイトかも知れませんが、検索窓があるので、調べたいことを語句を区切って検索してみると良いかも知れません。

参考URL：: http://tohoho.wakusei.ne.jp/

ログインすると、全ての回答が全文表示されます。

noname#10926

2004/04/18 22:18 回答No.2

テーブル内に画像を置いてテーブルにスタイルを設定する方法。 <TABLE border="0" width="358" height="231" style="vertical-align : middle;text-align : center;"> <TBODY> <TR> <TD><IMG src="image.gif" width="82" height="82" border="0"></TD> </TR> </TBODY> </TABLE> 背景画像を中央に寄せる場合は異なりますから補足願います。また、ページ全体を中央に寄せる場合は <HEAD> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <TABLE border="0" width="358" height="231" style="vertical-align : middle;text-align : center;"> <TBODY> <TR> <TD><IMG src="image.gif" width="82" height="82" border="0"></TD> </TR> </TBODY> </TABLE> </BODY>

ログインすると、全ての回答が全文表示されます。