- 締切済み
cssで全体をセンターにする場合、firefoxでうまくいきません。
firefoxのセンタリングについて質問です。 margin-right: auto; margin-left: auto; などでcenterにすることは、皆様の回答例でわかったのですが、これだと全体の幅が固定出ないときかない、widthを入れないといけないようにおもいます。 現在は、 table{ margin-right: auto; margin-left: auto; } のようにして対応していますが、できればレイアウトにテーブルは避けたいところです。 幅が可変でセンターにしたい場合どのようにすればよいのでしょうか。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- takosuke88
- ベストアンサー率20% (9/43)
関連するQ&A
- ページ全体を中央に表示したい
ページ全体を中央に表示したいので http://www.1uphp.com/con2/layout/bodycenter.html の通りにコードを張り付けたのですが、全体が若干左に寄ります。 どこを修正すればいいのでしょうか？ body { margin:0px; /* ページ全体のmargin */ padding:0px; /* ページ全体のpadding */ text-align:center; /* 下記のautoに未対応用のセンタリング */ } #main { margin-left:auto; /* 左側マージンを自動的に空ける */ margin-right:auto; /* 右側マージンを自動的に空ける */ text-align:left; /* 中身を左側表示に戻す */ width:650px; /* 幅を決定する */ } この通り貼り付けました。
- ベストアンサー
- HTML
- CSSで、何故か全体のセンタリングが出来ない
作成途中のホームページについて、お聞きしたいと思います。 ページ全体をセンタリングしたいと思っています。 上記のページで、 <div id="container"> </div> を、 #container { margin-left: auto; margin-right: auto; } としているのですが、何故か左揃えのままで、全体をセンタリングできません。 詳しい方がいましたら、ご回答お願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- IE８ではtext-align: center;でdivタグが中央にならない。改善策は？
IE８ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。 http://oshiete1.watch.impress.co.jp/qa4989799.html 上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。 CSSでは以下のように記述： div.center { width: 80%; margin-right: auto; margin-left: auto; } HTMLではセンタリングさせたいdiv要素を以下のように記述： <div class="center">文章等<div> ＜質問1＞ ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div> を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか（width: 80%はdivタグのセンタリングには特に必要ないのですか？なぜ、width: 80%が記述されているのか分かりません。）？この80%という値はどこから導き出されたのでしょうか（なぜ、例えば60%、70%等ではだめなのですか？）？ また、bodyタグをセンタリングしたい場合は、どうですか？CSSにwidth: 80%;が必要なのでしょうか？ ＜質問２＞ 「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか？margin:0 autoの場合、上下のマージンも0（無し）となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが？「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか？ また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか？ ＜divタグをセンタリングしたい場合＞ CSSでは以下のように記述： div.center { width: 80%; margin:0 auto } 上記の記述で div.center { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜bodyタグをセンタリングしたい場合＞ CSSでは以下のように記述： body { width: 80%; margin:0 auto } 上記の記述で body { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜質問3＞ IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか？ 以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか？ { text-align: center; margin-right: auto; margin-left: auto; } 又は { text-align: center; margin:0 auto; } 関連サイト等あれば、そちらも教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- 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
- 全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。 ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。 ブラウザで比較してみると、 ■IE7 body { text-align: center }で、中央揃え div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか？ 回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでのレイアウト（Firefox向け）
下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） ┌──────────────┐ ｜┌─────┐┌─────┐│ ｜｜TEXT ｜｜TEXT ｜｜ ｜｜ ｜｜ ｜｜ ｜└─────┘└─────┘│ └──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。
- ベストアンサー
- HTML
- CSSについて
こんにちは。 現在、CSSを使用して、Webページを作成しております。 先日、ページの幅を、750pxにし、センタリングしたのですが、 長い文章を入力すると、改行がされず、横スクロールになってしまいます。 CSSは、こちらです。↓ #hogehoge { margin:0 auto; width:750px; } 最後にmargin-left:auto; margin-right:auto;をつけてみたのですが、やはり駄目です。 HTMLは、こちらです。 <html> | |（途中略） <div id="hogehoge"> 長い文章～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ </div> </body> </html> どなたか横スクロールをせずに、幅の限界まで来たときに自動改行されるようなCSSを教えていただければ幸いです。 ご面倒だとは思いますが、お願いします。
- ベストアンサー
- CSS
- CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■ ■＝ヘッダー □□●●●● □＝メニュー □□●●●● ●＝コンテンツ（中身）1 □□○○○○ ○＝コンテンツ（中身）2 □□○○○○ ▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
補足
ありがとうございます。 今回、alignタグを使わないでということでして。。。 なので、firefox以外は、構造的には問題あるかもしれませんが、text-align:center で問題なく中央にそろっています。 firefoxでということです。