div要素をセンタリングする方法は？
- IEでは、赤い枠の左右中央に緑の枠が入り、「この文字は中寄せ」という文字と、緑の枠が縦にきれいに並ぶが、ネスケやOperaでは、緑の枠が左に寄ってしまう。
- テーブルを使用せずに、div要素を中央に寄せる方法はあるか。
- 表示が遅くなるのを防ぐために、テーブルは使用したくない。
- ベストアンサー
div要素をセンタリング
<div style="width:300px; text-align:center; border:1px dashed red;"> この文字は中寄せ <div style="width:200px; border:1px dashed green;"> このボックスも中寄せ </div> </div> このようなHTMLを表示すると、 ＩＥでは、赤い枠の左右中央に緑の枠が入り、「この文字は中寄せ」という文字と、緑の枠が縦にきれいに並ぶのですが・・ネスケやOperaでは、緑の枠が左に寄ってしまいます。 これを、中央に寄せる方法はないでしょうか？ （表示が遅くなるのを防ぐために、テーブルは使いたくありません）
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ネスケやオペラの方が正し動作で、text-align:centerでブロックがセンタリングされてしまうのはIEの有名なバグの一つです。 参考urlの内容を参考に対処してみてください。
その他の回答 (1)
- mat-21
- ベストアンサー率56% (91/162)
<div style="width:300px; text-align:center; border:1px dashed red;"> この文字は中寄せ <div style="width:200px; margin-left:50px; margin-right:50px; border:1px dashed green;"> このボックスも中寄せ </div> </div> 上記のように「300px-200px」の差分の100pxを左右に割り振って、左右50pxずつマージンを空ければ良いかと思います。
関連するQ&A
- div要素を半透明にして且つ外枠をつけたい
div要素を半透明にして且つ外枠をつけたいです。 下記のように書いたのですが、borderも一緒に半透明になってしまいます。添付画像の様にするにはどうしたらよいでしょうか？ 教えてください。 <html> <head> <style> div{ background: green; opacity:0.2; filter: alpha(opacity=20); border: 1px solid green; } #hoge{ position: absolute; top: 0; left: 50; width :50; height :50; } </style> </head> <body> あいうえお <div id='hoge' ></div> </body>
- ベストアンサー
- HTML
- div記述方法について
よろしくお願いします。 cssに以下のように記述をしました。 div#border {width: 800px; margin-left: auto; margin-right: auto; border: 1px solid #000000; padding: 10px 10px 10px 20px; background-color: #ffffff; } 出来た枠の中に文字や画像を入れていっているのですが、その文字や画像は、それぞれ左寄せにしたり、画像は中央揃えにしたりしています それは、問題無いと思うのですがFire Foxで見ると外側に作成した枠そのものが、中央に寄って表示されるのですがIEで見ると枠そのものが 左に寄ってしまいます。 Fire Foxでの表示が正しいようですが、IEでも枠が中央に表示させる事は出来ないのでしょうか？ 私はdiv#borderにtext-align: centerを記述したところ枠の中の文字から左寄せに表示したい画像まで中央に寄ってしまいました。これでは私の考えている内容では無いためtext-align: centerの記述は削除しました。 初心者では御座いますがご指導の程よろしくお願い致します。
- ベストアンサー
- HTML
- firefoxでdivタグ要素が突き抜ける
お世話になります。 firefoxですとdivタグで指定した高さ・幅を要素が超えると 突き抜けて表示されます。IEだと、指定した幅・高さが大きくなってくれる。 以下のソースで子の要素が親のボックス、子のボックスを突き抜けなくできないでしょうか？ もしかしたら簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #oya { border-right:orange 1px solid; border-top:orange 1px solid; border-left:orange 1px solid; border-bottom:orange 1px solid; } #ko { border-right:green 1px solid; border-top:green 1px solid; border-left:green 1px solid; border-bottom:green 1px solid; } </style> </head> <body> <div id="oya" style="width:200px;height:200px;"> <div id="ko" style="width:100px;height:100px;">ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ</div> </div> </body> </html>
- ベストアンサー
- HTML
- divタグのheigt:100%について
以下のようなソースを実行すると 赤い枠が黒い枠をはみ出して表示されてしまいます。 黒枠(IDが#main)もheight:100%を設定しており 赤い枠は黒い枠の子要素なのに どうして黒い枠(IDが#main)の高さが100%で表示されないのでしょうか？ html,body{ height:100%; } #main{ width:700px; height:100%; border:1px solid black; } #ue{ height:130px; width:700px; border:1px solid blue; } #shita{ height:100%; width:700px; border:1px solid red; } <body> <div id="main"> <div id="ue"></div> <div id="shita"></div> </div> </body>
- ベストアンサー
- HTML
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- divタグを中央寄せでwidthを指定したい。
Webのデザインを行っているのですが、以下のような事象に困っています。 ブラウザはGoogle chromeです。 <body> <div style="text-align:center;"> あいうえお </div> </body> これは中央寄せになるのです。しかし、 <body> <div style="text-align:center;width:400px;"> あいうえお </div> </body> こうすると、中央寄せが解除されてしまいます。 どうしてこうなるのでしょうか？ 出来れば理由も含めて理解したいのですが、教えて頂けないでしょうか。
- ベストアンサー
- HTML
- cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 締切済み
- HTML
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
なるほど、左右のマージンをautoにするのですね。 うまくいきました。ありがとうございました！