CSSでの中央揃え

締切済

質問者：cride0214
質問日時：2010/05/10 18:32
回答数：3件

CSSでの中央揃え

googleで表示させる為にCSSでページレイアウトとしているのですが、ページ全体（云わばbody）が左寄りのままであり、画面中央に配置することができません。
様々な質問を見ていると「text-align:center」はIEのバグでIEでしか表示されないとの事で・・・

マージンを変更し、左から右のみに動かしていましたがそれではウィンドウを縮小させたときに右側のマージンを変えていないので、間隔のあいた左側が出てしまいスクロールするはめになります（しかも右側はピッタリレイアウト面がウインドウ端についている）
右側のマージンの値も変更はしてみましたが、左側のようにいかずに命令自体スルーされます
width:700px;
margin-right:auto;
margin-left:auto;
}
↑コレとか

説明があやふやすぎて分かりにくい事は謝罪しますが、心当たりがある方がいましたらご教授お願いします

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3

回答者： serverserv
回答日時：2010/05/13 18:36

width:700px;

margin-right:auto;
margin-left:auto; の設定でも中央配置は出来ると思われるので、
中央配置にならない原因は、他の箇所にある可能性が考えられます。

上記の設定で中央配置したサンプルは次の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプル</title>
<style type="text/css">

</style></head>

<body>

<div class="box">サンプル</div>

</body>
</html>

margin:0 auto; でも中央配置できると思います。下記サンプル。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプル</title>
<style type="text/css">

</style></head>

<body>

<div class="box">サンプル</div>

</body>
</html>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2010/05/10 19:42

私は、ずっとHTML4.01strictかXHTMLですので気にもしてなかったのですが、・・・

きちんとDOCTYPEは指定しましょう。(もちろん、それに合ったHTMLを書かなければなりませんが)

＞「text-align:center」はIEのバグでIEでしか表示されないとの事で・

　これは、IEのバグ対策で親になるコンテナブロックがtext-alignでないと、margin-right;margin-leftに対するautoが効かないので、IEのために記述するのです。

　まあどうしてもなら、下記ソースはタブを全角スペース２文字に置き換えてあります。

　　html,body{margin:0px;padding:0px;text-align:center;}
　　body{ background: black url(./img/background.jpg) fixed;}
　　body div{
　　　　text-align:left;
　　　　background-color:white;
　　　　margin-left:auto;
　　　　margin-right:auto;
　　　　width:70%;
　　　　max-width:700px;
　　　　min-width: 400px;
　　　　padding: 0.5em;
　　　　line-height:1.6em;
　　}

でHTMLは
<body>
　　<div>
　　　　<h1>
以下省略
とかでよいでしょう。
★この場合<th>にtext-align:leftが継承されるので、thに関してはtext-align:centerを別途追記する必要があります。
body div table tbody tr th{text-align:center;}

- 0
- 件

通報する

No.1

回答者： noname#114407
回答日時：2010/05/10 18:56

例えば　HTML　なら　宣言文が

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

になっていますか？

その上で　幅を指定して　左右マージンをオートになっていればセンタリングされると思います。

{width:700px;
margin-right:auto;
margin-left:auto;
}
・・・とかね。

URLがなかったりするとブラウザの解釈が互換モードになり　マージンオートによるページ全体のセンタリングができなかったように記憶してます。