タグ・デザイン掲示板

[

枠を中央寄せに
by と

2012-05-30 01:13
PCから見た時だけ文章を枠で囲み、文字は左寄せのまま真ん中に表示させたいのですが、全部が左寄せになってしまいます。
<pc_only>を消して携帯で確認すると、ちゃんと真ん中に表示されるんですけど…。
何が間違っているんでしょうか？
それとも、PCにautoは使えないんでしょうか？

共通上下表示の上
<pc_only><div style="width:420px;margin:5% auto;padding:0 5%;border:solid #808080 1px"></pc_only>

共通上下表示の下
<pc_only></div></pc_only>

共通head
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW,NOARCHIVE,NOIMAGECLICK" /><meta name="robots" content="noindex,nofollow,noarchive,noimageclick" />

<style type="text/css">
* {
cursor:default;
font-family:メイリオ,Verdana,"ＭＳゴシック",Osaka,sans-serif;}

<pc>
body {
line-height:1.8;
letter-spacing:0.2em;}

br {
letter-spacing:normal;}
</pc>

<nopc>
body {
line-height:1.4;
margin:0 7%;}
</nopc>

form,input {
color:#333333;
margin:1%;}

</style>

SH11C
[編集]

by とく

2012-05-30 01:36
PC云々ではなく、IEブラウザではmargin autoが効きません。
なので　<pc_only><div style="text-align: center;"><div style="width:420px;margin:5% auto;padding:0 5%;border:solid #808080 1px"></pc_only>　としなければならないのです。

こうすることによりおそらく中央寄りになるはずです。最後に　</div>　を追加するのを忘れないでください。
検索サイトでも「IE margin」と検索すると出てきますよ。

pc
[編集]

by と

2012-05-30 01:57
おかげさまで解決しました。
センタリングする場合は左右にautoを指定するのが良い、と見たので、text-align:center;で中央寄せするのはあまり良くないと勝手に思っていたんですが、IEではautoが効かなかったんですね……。調べ不足でした。
教えてくださり、ありがとうございました。

SH11C
[編集]

by 匿名

2012-05-31 19:18
既に締め切られたところ、すみません。
訂正だけ。

「auto」が効かないのは全てのIEではなく、IE6以下のバージョンと、IE7以上でも互換モード表示の場合になります。
私はIE8を使っていますが、標準モードにすればちゃんとautoで中央に寄りますから。

文書型宣言(URLつき)を書けば、概ね標準表示モードになるかと思います。
検索サイトで「IE 標準モード」で検索すると、参考になる詳しい説明が見つかると思います。
metaタグを使って標準モードにしてしまう方法もありますが、文書型宣言を使うほうが個人的にはおすすめです。

また、IE以外のブラウザやIEの標準モードでは「text-align:center」ではボックスは中央寄りになりませんので、「margin:auto;」を使うほうが正しいと言うか、好ましいのは事実です。
「text-align:center」を使う場合でも、「margin:auto;」はできれば残して置いてください。

pc
[編集]

by と

2012-06-01 18:49
ご丁寧にありがとうございます。
いろいろ検索してみた結果、文書型宣言に<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">を入力し、metaタグを少し追加したところautoが効くようになりました。
今までIEしか使ったことがなかったので、これを機に他のブラウザも利用してみようと思います。

SH11C
[編集]

by たすけあい

2012-06-01 23:21
補足を失礼します。

「ボックスを左右中央に表示」
という場合は、ご回答されてることに以下をプラスして指定なさったほうが、厳密に「ボックスを左右中央表示」になります。

<pc_only><style type="text/css">
html{
margin-bottom: 1px;
height: 100%;
}
body{
margin: 0;
padding: 0;
}
</style></pc_only>

「html{}」について
IE以外の多くのブラウザは一画面内に収まるコンテンツ内容だと縦スクロールバーは表示しないですから、IEで表示される縦スクロールバーの分だけ表示位置が若干異なります。
これを避けるように、IE以外のブラウザにも縦のスクロールバーを表示させる指定です。（古いバージョンにも対応させる指定）
もし、コンテンツ内容が一画面内に収まらないでスクロールしないとコンテンツ全体が見れないという場合は、IE以外のブラウザも縦スクロールバーが表示しますからこの指定は不要かと思います。

「body{}」について
多くのPCブラウザはデフォルトでbodyにmarginがあります。Operaブラウザはpaddingです。これを「0」にしないと、標準モードにして左右の値を「auto」にしても厳密には左右中央表示にならないですから、「0」でリセット指定をします。

レイアウトによりますが、標準モードにして、CSSリセットを指定した後に各CSSを指定なさったほうが、各ブラウザの表示差異を極力少なくできます。

943SH
[編集]

[