chromeでmargin:0 autoが効かない

締切済

質問者：ninnikutips
質問日時：2014/07/03 13:30
回答数：2件

いつもお世話になっております。
よろしくお願いいたします。

wrapperのセンタリングがchromeで"のみ"出来ません。

スタイルシートの1行目に

* {margin:0 auto;}

と指定し、IE、FFでは問題なくセンタリングが行われています。

chromeでは更に、開発ツール上でwrapperに対してmarginを指定してやると
正しくセンタリングが行われます。
ところが改めてスタイルシート上で同様にwrapperに対して
marginを指定してもセンタリングされないのです。

これは一体どうしたことなのか・・・
何が邪魔をしているのでしょう。

また、リロードを繰り返すと何度かに一度センタリングされることがあります。
その逆で、一見正しくセンタリングされているように見えても
リロードを実行するとセンタリングが解除されることもあります。

javascriptを外してみても結局は変わりませんでした。

ご存知の方、是非ともご教示頂ければと思います。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2014/07/03 19:57

私は経験ないです。

* {margin:0 auto;}
こんなことしません。そもそもmargin:0;pdding:0;はセンタリングには関係ないです。
マージンは外のpaddingは内側の余白
　*は全称セレクタで詳細度は0ですが、カスケーディングの仕組み上、デフォルトのすべての要素のmargin,paddinを0にしてしまいます。
　そのため、本来は存在するはずのすべての要素のmargin,paddingを再度、すべて書き加えなければならなくなります。blockqutte,ol,ul,dl,li・・などすべて登場するたび再設定なんて無駄はしない!!

5.3 全称セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6.4 カスケード処理( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　はスタイルシートを利用するときの基本ですので、これだけは完璧に理解しておくこと。プロパティとか算出値などは、必要なとき見ればよい。

たぶん、原因は違うところにあります。
サンプル・・・とっても単純なサンプルです
★タブは＿に置換してあるので戻す。
★のDATAで検証済みのHTML4.01strict
★IE7以降、firefox,Opera,Googlechrome,Safariなどすべてで同じになるはず
　とはいっても
　　IE5,5.5ではセンタリングされない
　　IE6以前ではnav,asideが低いまま
　で使用には差し支えないはずです。

<!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">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="nav" id="contentTable">
＿＿＿<h3>目次</h3>
＿＿</div>
＿＿<div class="section">
＿＿＿<h3>チェックすべきこと</h3>
＿＿＿<ol>
＿＿＿＿<li>DTDはstrictであるか</li>
＿＿＿＿<li>DOCTYPEは標準モードで動作するよう適切に書かれているか</li>
＿＿＿</ol>
＿＿＿<p>
＿＿＿＿基本的にこれだけを守っておけば、現行のブラウザでの差は出ないはずです。
＿＿＿</p>
＿＿</div>
＿＿<div class="nav" id="contentTable">
＿＿＿<h3>目次</h3>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>補足</h3>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistory">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2014-07-02</dd>
＿＿</dl>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： tkmojo
回答日時：2014/07/03 19:21

wrapperって何でしょうか？

<div id="wrapper"></div>って事ですか？

普通は*にmargin:0 auto;を入れるなんて無茶苦茶な事はしないと思いますが、
例それをしたとしても別に問題は起こりません。

シンプルに、下記の様なソースを書いたとしましょう。

■html body内
<div id="wrapper">
test
</div>

■css
*{
margin:0 auto;
}

#wrapper{
width:500px;
background-color:#999;
}

※視覚的にわかりやすいよう、背景色を入れてます。
※marginのautoは横幅を指定したブロック要素にしか効かないのでwidthも入れてます。

これは後方互換モードのIE6を除き、どのブラウザでも同じように表示されます。
（ボックスは中央配置、テキストは左寄せ）
よって、*{margin:0 auto;}自体には問題は無く、意図通りの表示にならないのは*{margin:0 auto;}の記述以外が原因です。
ですので質問文では情報が足りません。

例えばcssファイルの記述を半分消して各ブラウザでどうなってるか確認する、等の部分的なチェックをしつつ絞り込んでいけば自ずと原因の記述がわかるはずです。
（cssが問題なんだったら）

IEはさておき、ChromeとFFで表示が異なるというのは結構異常な事なので、
サイト全体的におかしなことになっている可能性があります。
おかしな指定をしているか、html文書内でタグがてれこになってるとか…

htmlの記述ミスはこういったサイトでチェックできます。
http://cetus.sakura.ne.jp/htmllint/htmllint.html
http://www.htmllint.net/html-lint/htmllint.html

上で*{margin:0 auto;}自体には問題は無い、と書きましたが、問題が無いわけではなく
全ての要素に対してmargin:0 auto;が指定されているので、レイアウトが非常にやりにくくなるはずです。
状況の把握不足に陥り、自分でも何が何だかわからないcssの指定をやりまくっているんじゃないかと思いますね。