- ベストアンサー
可変幅でabsolute指定で中央配置できません
可変幅でabsoluteを指定すると中央配置できなくなります。 ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトを構築したくて色々試しているのですが、どうしてもうまくできません。 どのように指定したらできるのでしょうか？困っています、どなたかお助けください。 例えば画像が固定のサイズであれば width:500px; position:absolute; left:50%; margin-left:-250px; 見たいな形で中央配置できるのですが、可変の場合、、伸縮させたいので、横幅は常に500ｐｘとはなりません。 よろしくお願い致します。
- yorozuyaginchan
- お礼率100% (4/4)
- CSS
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
質問の意味がよくわからないのだが、left：50％なんてものをどーしても使わないといけないの？ 素直に考えて width:80%; position:absolute; left:10%;/*100％からwidthの80％を引いたものを左右に均等に開けると10％になります。*/ じゃダメなの？ または、質問に既にある、左右のマージンをautoじゃだめなの？ ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトはどちらでもできてると思うが、なぜ、左右のマージンをautoで成功しているにも関わらず、positionをつかいたがらるのかを説明せよ。 autoで中央にくるにも関わらず、困っている理由を説明せよ。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いえ、とても、簡単にできます。 画像は「置換インライン要素」なので、サイズは置換された画像のサイズに依存しますが、スタイルシートで抱合親ブロックのサイズを参照できるブロック要素に変えればよいだけです。 たとえばアルバム写真のリストがある場合・・ウィンドウサイズをどのように変えても伸縮します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1{text-align:center;} ul.photoAlbum,ul.photoAlbum li{display:block;list-style:none;margin:0;padding:0;width:100%;} ul.photoAlbum li img{display:block;width:60%;height:auto;margin:0 auto;} ul.photoAlbum li+li img{width:40%;} ul.photoAlbum li+li+li img{width:30%;} ul.photoAlbum li+li+li+li img{width:20%;} ul.photoAlbum li+li+li+li+li img{width:10%;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<ul class="photoAlbum"> ＿＿<li><img src="./images/photo/01.jpg" width="480" height="360" alt="家族みんなで"></li> ＿＿<li><img src="./images/photo/02.jpg" width="480" height="360" alt="娘"></li> ＿＿<li><img src="./images/photo/03.jpg" width="480" height="360" alt="息子"></li> ＿＿<li><img src="./images/photo/04.jpg" width="480" height="360" alt="父"></li> ＿＿<li><img src="./images/photo/05.jpg" width="480" height="360" alt="母"></li> ＿<ul> </body> </html>
お礼
ORUKA1951様 先日のお答えも含めまして本当にありがとうございます。 おっしゃられる上記の内容margin:0 auto;でできました。驚きです！また自身がしたかった画像の重なり等や配置を色々挑戦してみましたが、おどろくようにできるようになりました。今回お三方に、それぞれの角度からご指導頂けた事が、すごく良かったと思います。cssのmarginとpositionの仕組みがすごく理解できました。 本当に感謝の限りです。ありがとうございました。
- inuchokin
- ベストアンサー率55% (5/9)
これ結構悩んでたことがあって、今やってみたのですが、意外にすぐ出来たので回答させて頂きます。 position: absolute;のときはmargin-leftにマイナスを指定するんですね。勉強になりましたｗ 参考画像から察して、可変幅80%だとすれば、次のようにかけばうまくいきました。 width: 80%; margin-left: -40%; position: absolute; left: 50%; widthとmarginで単位を揃えればおｋってことなんでしょうかね
お礼
ありがとうございます！！私もうまくできました！！。80％に対しての半分の50％という考えかたではなく40％が半分になるんですね。 基準の考え方が間違っていたんですね。本当に助かりましたありがとうございます。
お礼
width:80%; position:absolute; left:10%;/*100％からwidthの80％を引いたものを左右に均等に開けると10％になります。*/ ありがとうございます！！目からうろこです！！お二方のご回答のおかげで、％基準の捕らえ方の仕組みがわかりました。本当に助かりましたありがとうございます。 あと、autoの件なのですが、通常フローでは成功しているのですが、画像の重なりを演出したいため、position指定をして高さの位置を調整すると、なぜかmargin:0 auto;が無効になり困っていました。float:left;のように常左上に張り付いてしまっている状態でした。