- 締切済み
chromeでのみセンタリングされない
いつもお世話になっております。 よろしくお願いいたします。 HPの本文要素を含めているdivのセンタリングを実行するために、marginをautoにすることで 対応しているのですが、chromeでのみ反映されなくて困っています。 開発ツールで確認すると、トップに配置してあるプルダウンメニューを隠すために 入れてあるoverflowを無効にすることで、なぜかセンタリングされます。 すべてのページが同じ挙動を取るわけでもなく、 ページによっては読み込み後、一瞬間をおいてからセンタリングされます。 この挙動の原因をご存知の方、ヒントをお持ちの方、 ぜひご教示頂ければと存じます。 何卒よろしくお願いいたします。
- ninnikutips
- お礼率50% (56/110)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ONEONE
- ベストアンサー率48% (279/575)
javascriptの影響はありませんか？ importantもダメですかね？
- ONEONE
- ベストアンサー率48% (279/575)
Lintで文法チェックしてみては。 HTML構造が壊れているのかもしれません。
お礼
ありがとうございます。 Lintで一通りチェックしてもみております。 特に問題もなさそうなのです。 いま、コメントアウトしながら クリティカルな個所を洗い出しているのですが、 該当のdivをわずかでも含めた途端にレイアウトが崩れるので、 はたしてHTML構造の問題なのかな、と頭を抱えているところです。
知らないです！ でもクロム、酷いことになってますね（笑） ファイヤーフォックスに乗り換えようかって思ってます。 見てると、サイトによって異なりますね。 というか、クロム、今不具合出てますよね？。 絞込み検索が機能してません。 フォーラムに質問したほうがはやいのでは？
お礼
ありがとうございます。 そうなんですか。意外と固有の不具合が多いのでしょうか？ cssで背景画像上に配置したテキストをinvisibleにして リンクを張っている個所があるのですが、 なぜかクロムのみリンクが無効になっています。 困ったなあ・・・と弱っています。
関連するQ&A
- CSSで、何故か全体のセンタリングが出来ない
作成途中のホームページについて、お聞きしたいと思います。 ページ全体をセンタリングしたいと思っています。 上記のページで、 <div id="container"> </div> を、 #container { margin-left: auto; margin-right: auto; } としているのですが、何故か左揃えのままで、全体をセンタリングできません。 詳しい方がいましたら、ご回答お願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- IEでＤＩＶ要素のセンタリングができません
こんにちは。 div要素に、 width:730ｐｘ margin:0 auto; を設定しても、 センタリングされません・・・ （文字列が入っています） ＵＲＬを張ります。 http://make-template.bbs.fc2.com/ 今、テンプレートを作ろうとしているのですが、ＩＥ9.0ではセンタリングできません… ファイやフォックス、グーぐるクロームではちゃんとセンタリングできているのに… きっとほかにも必要な情報はあると思いますが、 お礼や補足にて細くさせたいただきたいと思います。 回答をお待ちしております。
- ベストアンサー
- HTML
- cssでメインコンテンツをセンタリングする方法
cssでメインコンテンツをセンタリングする方法に関する質問をお願いいたします。 下記のサイトなどをみると、 http://www.css-lecture.com/log/css-beginner/026.html *xhtml <body> <div id="wrapper"> <h1>サイト全体を中央に配置にする</h1> <p>サイト全体を中央に配置にする為のテキスト</p> <!--/ #wrapper--></div> </body> *css body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } （1）「body」においてもセンタリングを行っているいるのですが、 それはどうしてでしょうか。 「div#wrapper」だけのセンタリングでは不十分なのでしょうか？ ＞ body { text-align: center; } ＞ （2）また、「p」などのインライン要素は { text-align: center; } を使い、 「id」などのブロック要素は { margin: 0 auto; text-align: left; } を使いますすが、 body要素に対しても、 { text-align: center; } とすることが出来るのでしょうか？ (3)あと、「div#wrappe」で囲ったブロックの中の 「p」や「id」で囲ったコンテンツの中身のテキストは 「div#wrapper」の「 text-align: left; 」で 全て左寄せになりますか？ 参考書などを見ても解りづらかったので 教えていただきたくお願い致します。m(_ _)m その他参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010809440
- ベストアンサー
- CSS
- ページ全体をセンタリングできません
フル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
- chromeでmargin:0 autoが効かない
いつもお世話になっております。 よろしくお願いいたします。 wrapperのセンタリングがchromeで"のみ"出来ません。 スタイルシートの1行目に * {margin:0 auto;} と指定し、IE、FFでは問題なくセンタリングが行われています。 chromeでは更に、開発ツール上でwrapperに対してmarginを指定してやると 正しくセンタリングが行われます。 ところが改めてスタイルシート上で同様にwrapperに対して marginを指定してもセンタリングされないのです。 これは一体どうしたことなのか・・・ 何が邪魔をしているのでしょう。 また、リロードを繰り返すと何度かに一度センタリングされることがあります。 その逆で、一見正しくセンタリングされているように見えても リロードを実行するとセンタリングが解除されることもあります。 javascriptを外してみても結局は変わりませんでした。 ご存知の方、是非ともご教示頂ければと思います。 よろしくお願いいたします。
- 締切済み
- CSS
- リストの「・」をセンタリングする方法について
<ul style="text-align:center"> <li><a href="XX">項目１行目</a></li> <li><a href="YY">項目２行目</a></li> </ul> このようにしてリスト表示をセンタリングさせており、 ブラウザチェックをしていたらFire Fox(3.5.8)、Chrome(4.0.249.89)、safari(4.0.4) で表示が ・ 項目１行目 ・ 項目２行目 となってしまい、文字はセンタリングしてくれましたが、「・」がブラウザの左端に寄ってしまい センタリングしてくれません。他のブラウザ(IE、opera)では「・」もセンタリングされているのですが… テーブルの時も同じような現象に陥ってしまい、 margin-left:auto;margin-right:auto;と指定する事で回避出来たのですが、 今回も同様の方法で<ul style="margin-left:auto;margin-right:auto;">やってみましたが、無反応… で、今度はautoではなくてpx数で指定すれば上手く「・」が移動してくれたのですが、ブラウザ画面を 小さくしてしまうと文字が潰れてしまい、断念。 更にlist-style-type:none;で指定してやれば見た目的にはセンタリングしていますが、「・」が無いので いまいち… どのようにしたらこれらのブラウザでちゃんと「・」がセンタリングするようになるのでしょうか？ よろしくお願い致します。
- ベストアンサー
- HTML
- イメージをセンタリングさせてかつ改行させない
イメージをセンタリングさせるために <img ...> を <div> で囲んで <div> に対して「text-align: center; 」か「display: block; margin-left: auto; margin-right: auto;」を指定すると中央に表示されますが、前後に改行がはいってしまいます。 イメージの前後で改行させないように「display: inline-block; _display: inline;」を指定すると今度は端によってしまいます。 中央に表示してかつ前後に改行をいれないような指定方法はあるのでしょうか？
- ベストアンサー
- CSS
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- CSSのセンタリングが、「div」で何故か出来ない
下記のアドレスのホームページについてです。 http://sky.geocities.jp/thanksv0358/index.html# HTMLで、 <body> <div id="main"> ～ </div> </body> とし、CSSで #main{ text-align:center; margin-left:auto; margin-right:auto; text-align:left; } としたにもかかわらず、何故かセンタリングができません。 今回、最初の<!DOCTYPE～の部分から全部、自分で書いてみました。 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 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
お礼
ありがとうございます。 拾い物のjavascriptを組み込んでいるのですが、 試しにコメントアウトしてみたところ、挙動が変わったように見受けられました。 具体的には、再現性が低くなったという感じです。 何度かリロードを繰り返すとレイアウト崩れが発生したりもします。 なんなんでしょうね。 javascriptが原因なら、外してしまえばそれまでという気がするのですが。 ただ、再現性が100％ではない時点でHTML構造やCSSの問題でもないような・・・ importantは使用しておりません。
補足
問題のタグ（wrapper）に対してmargin:0 autoが効いてないことがわかりましたので 改めて質問をいたしました。 http://oshiete.goo.ne.jp/qa/8663250.html もし何かヒントをお持ちでしたら、改めてお答え頂けると大変助かります。 ありがとうございました。