- 締切済み
CSSで表示領域を狭めている時に幅広画像をセンタリングさせたい
外部スタイルシートでは文章の読みやすさを考えて BODY{padding-right:10%； padding-left:10%;} と表示領域を狭めています。 その時、あるページで文章中に横長の画像（幅1000ピクセル弱程度）を中央表示させようとするのですが、その方法をお教え下さい。 設定した表示領域内の幅狭画像なら問題ないのですが、それ以上幅広の画像をセンタリングさせる事が出来るでしょうか。あれこれトライするのですが、ある画面解像度で良くても解像度を変えると崩れます。
- HTML
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- Ysan
- ベストアンサー率32% (44/136)
- Dpop
- ベストアンサー率51% (279/544)
#1 です。 見た目でポジショニングしようとしても、思う様に活きません。 既に、padding-left が利いているのであれば、その部分だけ、左側を減らしてセンタリングすれば良いのですが。。 その部分だけで良いので、ソースをアップして頂けれると、その画像と他の部分との関係が分かり、アドバイスしやすくなります。 よろしくお願いします。 ちなみに、左に巻き戻すには、 <style type="text/css"> <!-- .cent { width: 100%; text-align: center; paddgin-left: -10%; } --> </style> と、マイナスを付ける事で動作します。
補足
Dpopさん、お付き合い有難うございます。 では問題箇所を以下に抽出します。この幅広935pxのIMGをどんな解像度でもセンタリングさせたいのです。よろしくお願いします。 <HTML><HEAD> <STYLE type="text/css"> <!--BODY { padding-left:10%; padding-right:10%;} .chart{ position:absolute; left:4%;} .coment{ position:absolute; top:670px;}--> </STYLE></HEAD> <BODY> <P>文章二行</P> <DIV class="chart"><IMG src="chart.gif" width="935" height="576" border="0"></DIV> <P class="coment">文章二行</P> </BODY></HTML>
- Dpop
- ベストアンサー率51% (279/544)
#1 です。 書き間違えました。 width は text- は付けません。 <style type="text/css"> <!-- .cent { width: 100%; text-align: center; } --> </style> 失礼しました。
補足
Dpopさん、こんばんは。早速のご回答有難うございました。 直ぐにそのようにスタイルシートを書き換えてみましたが、左端が padding-left:10%;に従っており右端は画面外にはみだしてしまいました。実は画像幅が935pxあるのですが、私のPC（1024幅）ではSTYLEのくくりの中でDIVの中身を position:absolute; left:4%;と設定してやるとおおむねセンタリングされるのでとりあえずそれでUPしているのですが、画面解像度が違うと当然崩れてしまうのでそれを直したいのです。よろしくお願いします。
- Dpop
- ベストアンサー率51% (279/544)
お礼
Dpopさん、Ysanさん、ご回答ありがとうございました。 問題解決に至らず、このような疑問への解決方法を指南しているウェブサイトにも行き当たらなかったので、取り敢えずは1024*768画面で擬似的にセンタリングしている私の方法を続けます。
補足
Ysan、丁寧なご回答有難うございます。 早速外部スタイルシートから切り離して調べたい要素だけの簡単なテストHTMLを作ってから、頂いた内容を丸々コピペし画像も用意しました。 すると表示されたchart画像は左へ寄ってしまったのですが？