- 締切済み
CSSでの中央揃え
CSSでの中央揃え googleで表示させる為にCSSでページレイアウトとしているのですが、ページ全体（云わばbody）が左寄りのままであり、画面中央に配置することができません。 様々な質問を見ていると「text-align:center」はIEのバグでIEでしか表示されないとの事で・・・ マージンを変更し、左から右のみに動かしていましたがそれではウィンドウを縮小させたときに右側のマージンを変えていないので、間隔のあいた左側が出てしまいスクロールするはめになります（しかも右側はピッタリレイアウト面がウインドウ端についている） 右側のマージンの値も変更はしてみましたが、左側のようにいかずに命令自体スルーされます width:700px; margin-right:auto; margin-left:auto; } ↑コレとか 説明があやふやすぎて分かりにくい事は謝罪しますが、心当たりがある方がいましたらご教授お願いします
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- serverserv
- ベストアンサー率100% (2/2)
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-transitional.dtd"> <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"> <!-- html,body{ margin:0; padding:0; } .box{ margin-right:auto; margin-left:auto; padding:10px 0 10px 0; width:600px; background:#09F; } --> </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-transitional.dtd"> <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"> <!-- html,body{ margin:0; padding:0; } .box{ margin:0 auto; padding:10px 0 10px 0; width:600px; background:#09F; } --> </style></head> <body> <div class="box">サンプル</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私は、ずっと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;}
例えば 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がなかったりするとブラウザの解釈が互換モードになり マージンオートによるページ全体のセンタリングができなかったように記憶してます。
