スタイルシートでボックスを中央に表示する方法
- スタイルシートを使用してボックスを中央に配置する方法について解説します。
- 大ボックスを中央に配置し、その中に上から10、左から20の位置に小ボックスを配置する方法を知りたいです。
- tableタグを使わずにCSSのみで要件を実現する方法をお教えください。
- ベストアンサー
スタイルシートでボックスを中央に表示する方法
大ボックスを中央に配置して その中に、小ボックスを上から10、左から20の位置に配置させたいのですが、 大ボックスが中央に配置できません。 少し右側にズレてしまいます。 （ソースは文章最後にあります） そこで大ボックスの position: absolute; を削除すると 中央に配置できるものの、小ボックスが外に飛び出して ブラウザを基点とした上から10、左から20の位置に配置されてしまいます。 tableタグを使わずにCSSのみで 大ボックスを中央に。 その大ボックスの中に大ボックスの左上を基点として上から10、左から20の位置に 小ボックスを配置する方法はないのでしょうか・・・。 よろしくお願い致します。 <html> <head> <title>box</title> <style type="text/css"> <!-- .boxL { /* 大ボックス */ width: 400px; height: 100px; background-color: green; position: absolute; } .box1 { /* 小ボックス */ width: 75px; height: 30px; background-color: lightblue; position: absolute; top: 10px; left: 20px; } --> </style> </head> <body> <div align="center"> <div class="boxL"> <div class="box1">小ボックス</div> </div> </div> </body> </html>
- convalley
- お礼率100% (5/5)
- HTML
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
・ とりあえず、.boxL の position を .boxL { /* 大ボックス */ width: 400px; height: 100px; background-color: green; position: relative; } としてみてください。 .box1 の position: absolute; が、ボックス .boxL からの相対となります。
関連するQ&A
- スタイルシートに関して
最近、スタイルシートの勉強を始めました。 下記の様なCSS,HTMLを作成しブラウザーで表示するとIEは意図通りに IE以外(FireFox,Opera等)ではIEと違う（意図と異なる）表示になり 悩んでいます。 表示したい内容 黒いベース(300px,300px)の上に紫の四角(200px,200px)、さらにその上に緑の四角(100px,100px)を配置したい。 配置は、ブラウザーの左上隅より中心を上から150px,左から150pxとし３つ共に中心を合わせる。 IEでは、意図通りに表示 IE以外では、上にスペースが空き、各boxの表示位置が上にずれている CSS .box0 { width:300px; height:300px; background-color:#000000; } .box1 { margin-top:50px; margin-left:50px; width:200px; height:200px; background-color:#ff00ff; } .box2 { margin-top:50px; margin-left:50px; width:100px; height:100px; background-color:#00ff00; } HTML <BODY> <div class="box0"> <div class="box1"> <div class="box2"> </div> </div> </div> </body> ＊内容が悪いよとかCSSではできないよなどご意見・アドバイス頂ければ幸いです。
- ベストアンサー
- HTML
- inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- 締切済み
- CSS
- ブラウザの中央へ表示させたいのですが教えてください。
こんにちは CSSを使ってサイトをブラウザの中央へ表示させたいのですが うまくいかなくて、困っています。 div.box3 { /* タイトルロゴ */ width: 820px; height: 152px; position: absolute; top: 10px; left: 180px; text-align: center; } </head> <body> <div class="box3">aaaa</div> など <body align="center"> などを使って試してみたのですが、うまくいきません。 text-align: center;を無効にしてしまう原因・理由など があれば教えて下さい。どうぞ宜しくお願いします。
- 締切済み
- HTML
- CSSのボックスの配置他について
<head> <title>Webサイト</title> <style type="text/css"> <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FFEAEF; position: absolute; top: 50px; left: 100px; } { top: 50px; left: 150px; background-color: #FFEAEF } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } --> </style> </head> <body> <div id="example"> <div id="example1"><h1>ボックス1</h1></div> <div id="boxL">ボックス左</div> <div id="boxR">ボックス右</div> </div> </body> </html> とタグを打ちこみました。下の部分に文字を書きたいのですがどうすればいいですか？あと、<div id="boxL">ボックス左</div>の所は、普通の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
- 見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法に
見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法について 見出しや左メニューの部分のhtmlをページ全体の後ろのほうに配置したいと考えています。 添付の画像のソースが以下のとおりです ----------------------------------------------------------------------- <div style="position:relative;margin:auto;width:800px;"> <div style="height:20px;width:100%;background-color:#ff0000;"> </div> <div style="margin:0px 0px 0px 150px;width:650px;background-color:#00ff00;"> ああああああ<br /> ああああああ<br /> ああああああ<br /> ああああああ<br /> </div> <div style="position:absolute;top:20px;left:0px;width:150px;background-color:#0000ff;"> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> </div> <div style="height:20px;width:100%;background-color:#ffff00;"> </div> </div> ----------------------------------------------------------------------- 一応、左メニューについて実現できていて、見出しも同様にやれるのですが、 この方法では、absoluteで配置しているため、フッターの部分を重ならない ようにするためには、見出しとフッターの間のブロックについて高さを指定する しか方法を思いつきません。 ・absoluteで配置する以外の方法があるでしょうか。 ・absoluteで配置したとしても、高さを指定しない方法があるでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- ボックス内中央配置特殊版
<div><img src="sss.jpg"></div> でdivの中央に画像を配置したいとき cssで実現しようと思ったら div{ width:100px; height:100px; display:table-cell; text-align:center; vertical-align:middle; } あたりでできそうですが、画像がボックスより小さい場合はこれでいいのですが、 今回やりたいのはボックスより大きな画像の中央をボックスの中央に配置し、 ボックスからはみ出したものはover-flow:hiddenで見切りたいのです。 cssだけで実現可能でしょうか？ js使って画像をposition:ablosute にして位置計算する手は頭に浮かんでますが、もっとシンプルにできそうな気がして質問してみました。
- ベストアンサー
- HTML
- CSSのスタイルシートについて教えて下さい。
現在、ASP.NETにてメイン画面に使用する４分割のアプリケーションを作りたいと考えているのですがWeb Developer 2005 ではframesetが使えないので代替案を模索していました。 そこでCSSのスタイルシートにて作成しているのですが、見ようみまねでサンプルを加工しても記述を見ても経験が浅い為全く分からなくて困っています。 勉強が足りず恐縮ですがご教示下さい。 ４分割フォームの詳細は ・ヘッダー部分「Title.aspx」→ 両端に画像が入った題名のみのファイル ・左部分「left.aspx」→ 検索ボックスと検索ボタンが４つあり。キーを入力して 次の検索結果フォームへ異動する。 ・右部分「right.aspx」→ left.aspxと全く同じ作りです。 （東日本と西日本が分かれているようなイメージです。） ・下部 → 署名（フォームではなく文字列） <BODY> <HEAD> <link rel="stylesheet" type="text/css" href="pseudoframe_lmr.css"> </HEAD> <DIV class="menu"> メニュー </DIV> <DIV class="bar"> タイトル </DIV> <DIV class="main"> メインコンテンツ </DIV> <DIV class="bar2"> <p align="right">Copyrigth © 2006-2007 Name all rights Reserved</p> </DIV> </BODY> <STYLE> /* Opera/mozilla/共通用CSS */ <!-- BODY{ background-color : #e0fef8; } .menu{ width : 50%; top : 15%; left : 50px; top : 15%; position : absolute; background-color : #e0fef8; z-index : 1; } .bar{ width : 100%; height : 15%; left : 0px; top : 0px; position : fixed; overflow: auto; z-index : 2; } .main{ width : 50%; top : 15%; left : 20%; position : absolute; background-color : #e0fef8; z-index : 1; } .bar2{ width : 100%; height : 15%; left : 0px; top : 85%; position : fixed; overflow: auto; z-index : 2; } --> </STYLE> <!--[if gte IE 5 ]> /* IE5以上に適用させるCSS */ <STYLE> BODY{ width : 100%; margin : 0px; overflow : hidden; padding : 0px; } .menu{ position : absolute ! important; } .bar{ position : absolute ! important; } .main{ height : 70%; overflow: auto; } .bar2{ position : absolute ! important; } </STYLE> <![endif]--> コードを載せましたのでどの様に記述すればよいのかご教示下さいませ。 皆様、宜しくお願い致します。
- 締切済み
- HTML
- aタグ 中央寄せ
こんにちは aタグのの内容を上下左右の中央に寄せたいのですが、 どのようにすればよいでしょうか？ html-------------- <div class="specialEdition"> <a href="#">LINK</a> </div> css--------------- #leftcolumn .specialEdition { position:relative; width:180px; height:100px; background:url(images/left01.png) no-repeat; cursor:pointer;} #leftcolumn .specialEdition a{ display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
- 締切済み
- CSS
- 疑似インラインフレームを中央に配置する方法
疑似インラインフレームを中央に配置する方法 疑似インラインフレームを画面中央に配置する方法を教えてください。 ちなみに、以下のような記述を試してみたのですが…。 【css】 body { text-align: center; margin-top: 100px; color: #555555; font-size: 10px; font-family: "ＭＳ Ｐゴシック"; } *{ margin:0px; border:0px; padding:0px; line-height:100%; } .box{ text-align: center; padding-bottom: 50px; } .box_scroll{ text-align: center; width: 300px; height: 200px; padding: 10px 10px; overflow: auto; } 【xhtml】 <div class="box"> <img src="img.jpg" width="100" height="50" alt="img" /> </div> <div class="box"> <div class="box_scroll"> ---文章--- </div> </div> 初めの<div class="box">は中央に配置されるのですが、疑似インラインの部分は左に寄ってしまいます。 他にも他の方の質問を参考に試してみたのですが、初心者の為いまいちよくわからず、うまくいきませんでした。 どうか回答よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
ありがとうございます！ positionは absolute と static しか頭に入ってませんでした・・・ ちゃんと表示することができました。 おかげさまで無事解決しましたので、 回答を締め切らせていただきます。 本当にありがとうございました！