- ベストアンサー
XHTML+CSS 画像を中心（上下の）に配置したい
基本部分と思うのですが、下記の記述でどうしても中心にならず、躓いております。 「中心にしたい画像」を800pxの枠内の中央（上下）に置きたい為、 上下の余白を19pxとっているのですが、画像が下寄りになってしまいます。 動作確認はMac：safari3.0 Fire Fox2.0 です。 どなたか教えて下さい。よろしくお願い致します。 ------------------------- 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>test</title> <style type="text/css" media="all"> <!-- @import url("test.css"); --> </style> </head> <body> <div id="navi"> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> </div> </body> </html> ------------------------- 【CSS】 body { margin: 0px; padding: 0px; } #navi { margin: 0px; padding: 0px; height: 50px; width: 800px; border: 3px dotted #333333; } #navi h2 { padding: 19px 30px 19px 0px; margin: 0px; float: left; }
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
id="navi"から邪推すると、<li>のほうがいいのでは？ 標準CSSではwidth/heightにはpaddingは入りませんので、h2にheight:12pxを指定。 inline-boxの高さ基準をあわせるため、imgにvertical-alignを指定。 #navi { margin: 0px; padding: 0px; height: 50px; width: 800px; border: 3px dotted #333333; } #navi h2 { padding: 19px 30px 19px 0px; height:12px; margin: 0px; float: left; } #navi h2 img{ vertical-align: top; } どちらかというと#naviにpaddingを指定して、h2はpadding:0が良いと思います。 h2の中身がテキストの場合はh2にvertical-alignを指定かな。（あまり関係ないかも） フォント最小サイズはブラウザで制限出来ますので、あまりに小さくするとずれます。（pxやptは非推奨ってやつです） #navi h2 { vertical-align: center; font-size: 12px; } 参考に、質問内容の状態は、 h2{ height:100%;/* または 50px */ } img{ vertical-align:base-line; } に近い状態で表示されていると思います。
その他の回答 (2)
- venzou
- ベストアンサー率71% (311/435)
IEにはバグがあるので、floatを指定する際には注意が必要です。 akoblueさんは、MAC環境の様なので気づき難いかも知れませんが、 WinodwsのIE6は利用者が多いので、無視は出来ないと思います。 ・floatと一緒に padding、margin は指定しない。 padding、marginが欲しい場合は、中の要素で指定します。 ・floatを指定する時は、width、height を指定する。 詳しくは、下記など参考にして下さい。 http://mb.blog7.fc2.com/blog-entry-83.html 以下、変更箇所のみ抜粋。 #navi h2 { padding: 0px; margin: 0px; height: 50px; width: 230px; float: left; } #navi h2 img{ padding: 19px 30px 19px 0px; } これで、Windows環境の、Firefox2、IE6、Safari3で正常に表示されました。
お礼
回答ありがとうございます。 Winでの環境でも確認済みだったのですが、特にMacでの環境で大きく崩れていた為、質問させて頂きました。 floatの扱いについてのアドバイスもありがとうございました。 ソース、参考にさせていただきます。
<h2>というタグは「見出し」という意味ですので画像に使うにはあまり適していないと思います。 参考：http://www001.upp.so-net.ne.jp/fukushi/hp/css.html これが関係しているのかどうかわかりませんが下記の記述でしたら画像は上下中心になりました。 ブラウザはFirefox2.0.0.11とIE6で確認しました。 CSS記述例 body { margin: 0px; padding: 0px; } #navi { margin: 0px; padding: 0px; height: 50px; width: 800px; border: 3px dotted #333333; } #navi .image{ padding: 19px 30px 19px 0px; margin: 0px; float: left; } HTML記述例 <div id="navi"> <div class="image"> <img src="中心にしたい画像" width="200" height="12"> <img src="中心にしたい画像" width="200" height="12"> <img src="中心にしたい画像" width="200" height="12"> </div> </div> ただ、当方はWindowsでの確認ですのでMacとはまた違うのかもしれません。ご参考までに。
お礼
回答ありがとうございます。 h2の扱いについてのアドバイスもありがとうございました！ ソース、参考にさせていただきます。
お礼
回答ありがとうございます。 とても詳しい解説で助かりました。こちらのソースで問題解決できました。 ありがとうございます。