• ベストアンサー
  • すぐに回答を!

可変幅でabsolute指定で中央配置できません

可変幅でabsoluteを指定すると中央配置できなくなります。 ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトを構築したくて色々試しているのですが、どうしてもうまくできません。 どのように指定したらできるのでしょうか?困っています、どなたかお助けください。 例えば画像が固定のサイズであれば  width:500px; position:absolute; left:50%; margin-left:-250px; 見たいな形で中央配置できるのですが、可変の場合、、伸縮させたいので、横幅は常に500pxとはなりません。 よろしくお願い致します。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数14868
  • ありがとう数4

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

  • ベストアンサー
  • 回答No.2
  • Dr_
  • ベストアンサー率50% (1/2)

質問の意味がよくわからないのだが、left:50%なんてものをどーしても使わないといけないの? 素直に考えて width:80%; position:absolute; left:10%;/*100%からwidthの80%を引いたものを左右に均等に開けると10%になります。*/ じゃダメなの? または、質問に既にある、左右のマージンをautoじゃだめなの? ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトはどちらでもできてると思うが、なぜ、左右のマージンをautoで成功しているにも関わらず、positionをつかいたがらるのかを説明せよ。 autoで中央にくるにも関わらず、困っている理由を説明せよ。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

width:80%; position:absolute; left:10%;/*100%からwidthの80%を引いたものを左右に均等に開けると10%になります。*/ ありがとうございます!!目からうろこです!!お二方のご回答のおかげで、%基準の捕らえ方の仕組みがわかりました。本当に助かりましたありがとうございます。 あと、autoの件なのですが、通常フローでは成功しているのですが、画像の重なりを演出したいため、position指定をして高さの位置を調整すると、なぜかmargin:0 auto;が無効になり困っていました。float:left;のように常左上に張り付いてしまっている状態でした。

関連するQ&A

  • 中央寄せに対するabsolute配置

    中央寄せされたページの右上あたりに画像を配置したいのですが、 重要でないものなのでHTMLの下のほうに書いています。 普通に position:absolute; で持ち上げると、画面左上が基準であるためモニターサイズによって中央寄せ部分との位置関係が狂ってしまいますよね? かといってmarginにマイナスを指定したくありません。 そこで、画像の入った要素を最上部(top:0px)の中央(left:50%)に絶対配置し、そこからimgを絶対配置でleft:100pxのように右に動かしてみました。 IEやFirefox、Opera、Chromeなど、思いつくブラウザで見たところ問題ないのですが、Dreamweaver CS4のライブビューで見るとずれています。 たしかWebkitがエンジンだったと思うのですが、もっと賢いやり方はありませんか?

    • ベストアンサー
    • HTML
  • 中央寄せが出来ません。

    下記の様な構成で中央寄せが出来ません。 何がいけないのでしょうか? アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }

    • ベストアンサー
    • HTML
  • 複数のdivを横並びさせる時一つだけ中央

    複数のdivを横並びさせる時一つだけセンタリングする方法はありますか? widthを狭めてもカラム落ちや片方に寄らせずに l--口----------l3カラム l--------------l l---------------l左右可変l--------------l l-----------------------------------------l l-----------------------------------------l margin: 0 auto;で指定しても左の画像に寄ったり離れたりしてしまいます。 body{ width:1500px;} #3カラム{margin-left: 0 auto; margin-right: 0 auto; width:500px; ~~ } #左画像{width:100px; margin-left:10px; z-index:2; }

    • ベストアンサー
    • CSS

その他の回答 (2)

  • 回答No.3

いえ、とても、簡単にできます。 画像は「置換インライン要素」なので、サイズは置換された画像のサイズに依存しますが、スタイルシートで抱合親ブロックのサイズを参照できるブロック要素に変えればよいだけです。 たとえばアルバム写真のリストがある場合・・ウィンドウサイズをどのように変えても伸縮します。 <!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の仕組みがすごく理解できました。 本当に感謝の限りです。ありがとうございました。

  • 回答No.1

これ結構悩んでたことがあって、今やってみたのですが、意外にすぐ出来たので回答させて頂きます。 position: absolute;のときはmargin-leftにマイナスを指定するんですね。勉強になりましたw 参考画像から察して、可変幅80%だとすれば、次のようにかけばうまくいきました。 width: 80%; margin-left: -40%; position: absolute; left: 50%; widthとmarginで単位を揃えればおkってことなんでしょうかね

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございます!!私もうまくできました!!。80%に対しての半分の50%という考えかたではなく40%が半分になるんですね。 基準の考え方が間違っていたんですね。本当に助かりましたありがとうございます。

関連するQ&A

  • スタイルシートのpositionでフッターを位置指定するには

    こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか?ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }

  • IEでは指定の位置に配置してくれません

    添付図のようにしたいのですが、 IEでは右に空白ができてしまい配置したいところに配置できません。 図のFireFox確認時の方が配置したい位置に配置できている正です。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> CSS /* レイアウト設定ここから */ #pageBody { width: 740px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: auto; } #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #topFlContens { width: 740px; height: 320px; margin: 0px; padding: 0px; } #box { width: 740px; height: 550px; margin-top: 20px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding: 0px; } /* レイアウト設定ここまで */ #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi ul { margin: 0px; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } Web初心者のため、アドバイス頂けると幸いです。

    • ベストアンサー
    • HTML
  • ボタンの配置

    初心者の問題ですが。。 ページの中央にボタン配置したいときはどのタグ使うでしょうか。 <asp:Button id="cmdSubmit" style="Z-INDEX: 105; LEFT: 100px; POSITION: absolute; TOP: 400px"runat="server" Text="送信" Width="128px"></asp:Button> <asp:Button id="cmdCancel" style="Z-INDEX: 106; LEFT: 350px; POSITION: absolute; TOP: 400px"runat="server" Text="キャンセル" Width="128px"></asp:Button> LEFTのところcenterに変えてみたんですがだめでした。。。 教えてください。 よろしくお願いします。

  • CSS 文字と写真を横並びにして中央配置

    お店のホームページを作っていて どうしてもできない箇所があるので質問させて頂きます。 レスポンシブの伸縮するフッターに、左に住所を文字で記載して 右に地図の画像を配置したものを、フッターの中央に配置したいと考えています。 <div style="float:left; margin-right:20px; width:220px;"> 東京都.......<BR> 03-.......<BR> </div> <div style="float:left; width:220px;"> <img src="../map.jpg" /> </div> こんな感じで、2つの要素を横並びにはできたのですが どうしても中央配置にできません。。。 さらに、ブラウザーの横サイズを小さくしていくと 要素が縦並び(上:住所 下:地図)になって中央配置にしたいと考えています。 とても簡単そうなのですが、まる2日間 いろいろ試して、どうしても解決できないので どなたかアドバイス頂けると幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSS block 表組 position:absolute;

    まったくの初心者です。 本当の初心者なので、凄いことをしていたり 説明が分かりにくいかもしれませんが、 ご教授、よろしくお願い致します* ・blocka の長方形が上 ・上記blockaの下を  blockb blockc blockdに縦に分ける これで四角のまとまりができます。 ・この四角のまとまり、の右側をbody指定しました。 blocka blockb blockc blockdを#FFFFFFに。 bodyを#CCCC99にしたいです。 下を書いたのですが、 .contents{ width:700px; background-color:#FFFFFF; 背景色#FFFFFFが、div.blocka、だけに反映されるんです。 div.blockb、div.blockc、div.blockdには、 body{ margin:0px; padding:0px; background-color:#CCCC99; } bodyの#CCCC99が反映されています。 改善できる方法をご存じないでしょうか。 私のおかしな説明で簡単に理解できるかどうか判りませんが よろしくお願い致します* ***************************************************** /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#CCCC99; } body a img{ border: none; } .contents{ width:700px; background-color:#FFFFFF; } div.blocka { width:500px; height:150px; margin-left:100px; } div.blockb { width:100px; float: left; } div.blockc { width:200px; position:absolute; left:100px; } div.blockd { width:200px; position:absolute; left:300px; }

  • レイアウトを常に中央に配置したい

    始めまして、まったくの初心者で御座いますが、 下記現在レイアウト(テーブル)、左よりになっていますが、ブラウザの幅や大きさや、デイスプレイのサイズにかかわらず。 常に中央に配置したい場合、下記をどう書き換えればよいでしょうか、 宜しくお願い致します。 <style type="text/css"> <!-- body { font-size:80%; background:#fff; color:#000; } table.form { border:1px solid #7777bb; border-collapse:collapse; margin-top:1em; } table.form th,td { text-align:left; border:1px solid #7777bb; padding:8px; font-weight:normal; } table.form th { background:#cccce6; } table.form td { background:#f0f0f0; width:500px; } strong.ttl { text-align:left; border-left:solid 4px #cc0000; display:block; padding:2px 5px; margin-top:1.5em; } input.button { width:90px; } --> </style> 宜しくお願い致します。

  • CSS 配置 Absolute、Margin

    お世話になります。 CSSを使用してWebサイトを作成しているのですが、ある画像の上にもう一つの画像を重ねたいと思っています。そんな時まず後ろの画像を配置し、その次に上に重ねる画像をPosition:absolute; margin:xxpx; として表示させています。IE以外で表示されるのと、IEで表示される位置が違うので困っています。 とりあえず画像の表示方法は以下のよう HTML <div id="a"> <img src="aaa.jpg"> <div id="b"></div></div> CSS #a {float:left; overflow:hidden;} #b {position:absolute; margin:-40px; height:10px; width:20px; background:url(aa.jpg);} IEすべて同じように表示されるのかと思いましたが、今日学校のPCで見たところ、IE以外のブラウザで表示されるのと同じように表示されていました。 今のところはIEのみのCSSとその他のCSSとの設定でやりくりしていますが、すべてのブラウザでどんな場合も同じように(まったく同じは無理だとは思いますが)表示させる方法を教えてください。 CSSを使い分けたりするのではなく。一つのCSSだけで;

  • overflow-x : hiddenが効かない;

    mac、html5でwebサイトを作ってます。 せっかく、以前ここで3カラム左右可変をやり方を教えていただいたのですが、うまく出来なかったので3カラムとも固定で@media screen and で一定のwidthになったらサイズを変更する方法をとる事にしました。 それで、widthが狭まった時スクロールを表示しないようにしたいんですが、 overflow-x : hidden; (position:relative;)が効きません。どのブラウザでも同じで理由が解りません。 widthを狭めてもカラム落ちや片方に寄らせずに.. html5で書いてるのですがhtml5.jsが重いそうなのでhtm4でも使えるタグで使ってます。 l----------------------------------------------------l l------------------id=header-------------------l l_____________________________________l --口-----------l最初は左I右固定l----------------l l-----------------lの3IカラムI。l----------------l l----------------------------------------------------l l----------------------------------------------------l body{ width:1500px; position:relative; overflow-x : hidden; } . header{ ~~~ ~~~ } #3カラム{ margin-left: auto; margin-right: auto; width:500px; position: relative;かposition: absolute; &#65374;&#65374; } .clearfix:after{ content: ""; clear: both; display: block; } #左画像{ position: absolute; width:100px; margin-left:10px; z-index:2; } htmlで左画像はカラムの外に置きました。 widthがある一定の数まで縮まった段階で@media screen and を使って中央も可変にするつもりです。 可能でしょうか?

    • ベストアンサー
    • HTML
  • 可変レイアウト時の、floatしたulの中央寄せ

    floatしたulをセンタリングする為、以下のソースを記述しました。 <section> <ul> <li>ボタン1</li> <li>ボタン2</li> </ul> </section> section { position: relative; overflow: hidden; } section ul{ float:left; left:50%; position:relative; } section ul li{ float:left; left:-50%; position:relative; width:150px; margin-right: 5px; } ひとまずはそれで上手くいったのですが、スマホサイトなので横幅を可変にしたいと思い section ul li{ float:left; left:-50%; position:relative; width:40%; margin-right: 5px; } に書き換えた所、リストの横幅がすごく狭くなってしまいました。 %幅で横に2つ並んだリストボタンをセンタリングさせられれば、 potisionを使用したセンタリングにこだわっているわけではありませんが 自分で思いつく限りを試しても解決に至らず、質問させていただきました。 html5、css3で記述しています。 詳しい方がいらっしゃいましたら、よろしくお願い致します。

    • ベストアンサー
    • CSS
  • 【CSS】左右可変、中央固定の3カラムレイアウト

    ボックス3つを横一列に、 center:画面中央配置、幅は900px固定 left:残りの左領域全て(幅可変) right:残りの右領域全て(幅可変) というレイアウトをしたいのですが、CSSでの指定方法が解らず困っています。 2カラムや左右固定・中央可変の3カラムレイアウトは様々なサイトで解説されているのですが、 このパターンは中々無いようで見つかりませんでした。 良い方法をご教示いただければと思います。 宜しくお願いします。

    • ベストアンサー
    • CSS