- ベストアンサー
position:absoluteでカチカチに固めたページを丸ごとセンター表示にしたい
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
すみません、leftが抜けてました。 body{ position: absolute; width: 800px; /* 内容に合わせて任意 */ margin-left:-400px; /* widthの半分をマイナス指定 */ left: 50%; }
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
body{ position: absolute; width: 800px; /* 内容に合わせて任意 */ margin-left:-400px; /* widthの半分をマイナス指定 */ } または、丸ごとdivで囲って、 div#wrapper{/* 上のスタイルと同じ物 */} 未検証です。
- kooooooool
- ベストアンサー率83% (5/6)
ソースがないので・・・回答のしようがないと思います。
関連するQ&A
- position:absoluteなのにセンター合わせができるのは何故？
CSSです。 うまく表示されているのですが、何でうまくいっているのかわからないことがあります。 というのも、コンテンツをセンター合わせのレイアウトにしているというのにposition:absoluteのパーツがちゃんとセンター合わせがなぜかできてしまっているんです。 ユーザがブラウザの横幅を拡げようとも狭めようとも、常に左右をセンター合わせするつくりになっています。 以下が成功ソースです。 ※下記のlinkboxは、headerというIDセレクタに包含されている。 div#linkbox { position: absolute; top:50px; padding-left: 300px; width: 500px; _width: 800px; } div#header { background: #333333; text-align: left; width:800px; height:100px; margin-left: auto; margin-right: auto; } なぜこのソースでうまくいってしまうんでしょうか。 absoluteでも、左右を設定しない場合、自動で包含ブロック内に収まるとでもいうのでしょうか。
- ベストアンサー
- HTML
- センターに表示をしたいのですが
ホームページビルダーでサイトを作成しています。 最近スタイルシートを勉強しています。 以前ページをセンターにするときは <div align="center"> コンテンツ </div> このようにしていました。 できれば スタイルシーと使いたいのですがセンターに来てくれません。 いまは <head> #content{ width : 760px; margin-left : auto; margin-right : auto; </head> <body> <div id="content"> コンテンツ </div> このようなソースを試したのですが、どこか間違っているのでしょうか。 アドバイスをよろしくお願いします。
- ベストアンサー
- HTML
- ホームページビルダー16 ページセンター表示
現在サイトを制作しています。 Yahooなどのようにページをセンター表示をしたいのですがやり方が分かりません。 調べて色々試してみましたがセンターに表示されません。 どのようにするのでしょうか？ 以下は試しにやってみた結果です。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <style type="text/css"> <!-- body{ text-align : center; margin-left : auto; margin-right : auto; } --> </style> </head> <body> <div style="width : 180px;height : 100px;top : 33px;left : 252px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo11.gif" width="86" height="37" border="0" alt="テスト"></div> <div style="width : 950px;height : 840px;top : 4px;left : 2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"></div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- footerを{position:absolute;bottom:0p
footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。 これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？ 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって） </div> <div id="mainContainer"> ・・・・中略(3カラム等あって） </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。
- 締切済み
- HTML
- CSSのpositionでフッターが最下に配置されてくれない
CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか？ WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; text-align:center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------ ●以下、HTMLソースです ------------------------------------------------------ <div id="hdr-wrap"> <div id="hdr"> <div id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA--> コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。
- 締切済み
- HTML
- google画像検索のように画像を表示させたい
http://oshiete1.goo.ne.jp/qa4869855.html で質問した者です。 「googleのように 画像」で検索したところ http://okwave.jp/qa4567914.html このページがHITしました。 そこでNo3の方のソースを元に画像を表示させてみました。 ---ここから--- <style type="text/css"> <!-- p{ text-indent: 1em;} body>h1,body>h2{ text-align:center;} p.abstract{ margin-left: 20%; margin-right: 20%;} div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;} div.ImageList ol{ display:block; margin:0px; padding:0px;} div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;} div.ImageList>ol>li>ol>li{display:block;font-size:0.8em;text-align:left;padding:0.2em;text-indent:1em;} div.ImageList hr{ clear:both;visibility:hidden;} div.ImageList div{ position: absolute; width: 21%; left: -23%;top: 0px;font-size:0.9em} --> </style> ---ここまで--- このスタイルシートについてなのですが、 画像のまわりについている黒の薄い線と、大きな青い線を消すことは出来ないでしょうか？ この二つの枠線を消してもっと画像どうしをギュッと詰め込みたいのです。 どの部分を削れば削除することが出来ますか？
- ベストアンサー
- HTML
- positionプロパティの設定について
下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------
- ベストアンサー
- HTML
- ページ全体をセンタリングできません
フルCSSでWEB作成をしていますが、ページ全体をセンタリングしたいのですが、IEで見ると右にずれてしまいます。ネットでいろいろ検索をして試してみたのですが、うまく行きません。 HTMLは <div id="centering"> <div id="wrapper"> </div> </div> で、CSSは #centering { text-align: center; width: 100%; position: absolute; margin: 0px; padding: 0px; } #wrapper { width: 900px; margin: 0px auto 0px auto; padding: 0px; text-align: left; です。 これではだめなんでしょうか。
- ベストアンサー
- CSS
- position:absoluteが表示されない
分からない部分が出た際にいつもお世話になっております。 今回もどなたかご回答頂けますと幸いです。 position:absoluteを指定した要素（#search_box）が、IE6でのみ表示されず困っています。 他ブラウザで見ると問題無く表示されているのですが、どこに問題があるのでしょうか。 【html】 <div id="contents_wrap" class="clearfix"> <ul id="pankuzu"> <li>テスト</li> <li>テスト</li> </ul> <div id="search_box"> <form method="get" action="./search.cgi"> <input name="query" style="width:300px;" value="テスト" /> <input type="submit" value="検索" class="button" /> </form> <!-- /search_box --> 【css】 #contents_wrap { clear: both; margin: 0 auto; width: 960px; padding-top: 10px; padding-bottom: 100px; } #pankuzu { padding-bottom: 70px; font-size: 12px; } #pankuzu li { display:inline; line-height:110%; list-style-type:none; } #search_box { position:absolute; top:200px; left:320px; } ※実物は長いのでhtmlは必要と思われる箇所だけ抜き出しています。 どうぞ宜しくお願いします。
- ベストアンサー
- HTML
- CSSによるセンターよせについて
<div> <p> 真ん中に寄せたいコンテンツ </p> </div> のように</p>部分を<div>の真ん中に寄せたい場合、 div { width:400px; } div p{ margin-left:auto; margin-right:auto; } で実現できるとおもうのですがこれだとmargin: autoの利かない IE6では真ん中によりません。 そこで、IE6用に div { width:400px; text-algin: center; } div p{ margin-left:auto; margin-right:auto; } と text-algin:center を施すわけですが 複数のブラウザに対応させようとおもったら、 常にtext-alginとmarginで２パターンのセンター寄せの 記述をしないといけないのでしょうか。 もしくは、 <table algin='center'><tr><td> <p> 真ん中に寄せたいコンテンツ </p> </td></tr></table> のようにテーブルを使わないといけないのでしょうか。 もっとシンプルにいろんなブラウザに対応したセンター寄せ方法があれば アドバイスお願いします。
- ベストアンサー
- HTML
お礼
凄いですね・・一発で出来ました。本当にありがとうございます！