- ベストアンサー
CSSにてコンテンツを中央へ寄せるには
どうも、こんにちは。 普段、1024x768 の画面でデザインをしております。 BODY { margin: 30px; } と記述すると私のモニターではちょうど中心に来るので良かったのですが、昨今の大画面モニターで見ると偉く左寄りで不恰好なことに気づき、どの大きさの画面で見ても中央に寄るように変更したいと思い、調べたのですが <body> <center> <table> コンテンツ </table> </center> </body> のように<center>を使ってやる方法はわかったのですが、現在ページ数が多数なため、全てのページにこれをいちいち入れるのは…と思い、できればCSSにて一気に反映できればと思っているのですが、色々とBODYタグ以下に入れて試したのですが、思うようになりません。 どなたかCSSによってコンテンツを中央に持ってくる方法をご存知の方いらっしゃれば、是非ご教授願います。 よろしくお願いします。
- umizaru76jp
- お礼率35% (13/37)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
IEにバグがあるため、marginだけでは中央寄せにならないです。 <style type="text/css"> BODY{ text-align:center; } table{ margin:auto; } </style>
その他の回答 (2)
- tacfore
- ベストアンサー率45% (5/11)
すみません、さきほどのはTABLEのみでしたね(^^;) <style type="text/css"> BODY { margin-left:auto; margin-right:auto; padding:20px; width:150px; } </style> としてみてはどうでしょうか？ 私も、これは今調べたばかりなので自信はありませんが...
- tacfore
- ベストアンサー率45% (5/11)
<style type="text/css"> table{ margin:auto } </style> はどうでしょう？
お礼
IE以外はこれで対処できました。ありがとうございます。しかし、No.3さんの回答のようにIEにはもう一筆必要でした…。
関連するQ&A
- css firefox IE 画像を中央揃えにしたいです
初心者です。よろしくお願い致します。 cssでホームページを作っています。 index.htmlに画像を中央に貼り付けたいのですが、 firefoxでは中央揃えに、IEでは左側に表示されます。 下にタグを書くので、ご回答いただけましたら幸いです。 よろしくお願い致します。 -------------------------------------------------- <html> <head> <title>○○○</title> <link href="design/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <img src="img/tobira.jpg"> </div> </body> </html> -------------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#FFFFFF; } body a img{ border: none; align:center; } .contents{ width:800px; margin:0px auto; margin-top:100px; } h1{ color: #FFFFFF; }
- ベストアンサー
- HTML
- CSSでの中央揃え
CSSでの中央揃え googleで表示させる為にCSSでページレイアウトとしているのですが、ページ全体（云わばbody）が左寄りのままであり、画面中央に配置することができません。 様々な質問を見ていると「text-align:center」はIEのバグでIEでしか表示されないとの事で・・・ マージンを変更し、左から右のみに動かしていましたがそれではウィンドウを縮小させたときに右側のマージンを変えていないので、間隔のあいた左側が出てしまいスクロールするはめになります（しかも右側はピッタリレイアウト面がウインドウ端についている） 右側のマージンの値も変更はしてみましたが、左側のようにいかずに命令自体スルーされます width:700px; margin-right:auto; margin-left:auto; } ↑コレとか 説明があやふやすぎて分かりにくい事は謝罪しますが、心当たりがある方がいましたらご教授お願いします
- 締切済み
- CSS
- CSS中央そろえについて
CSSを使用し、中央そろえを行っているのですが、winNN、winOperaでテーブル事態がセンターによりません。テーブルを寄せるのには無理があるのでしょうか ▼ＣＳＳファイル -------------------- /*TABLE*/ body { border: 0; margin: 0; padding: 0; font-family:Verdana,Arial,Helvetica,sans-serif; color:#333333; background:#fff; text-align: center; } #layout #frame{ border: 0; margin: 0; padding: 0; width: 300px; background: #ccc; } -------------------- ▼HTMLファイル <div id="layout"> <table cellspacing="0" cellpadding="0" summary=" " id="frame"> <tr> <td>aaa</td> <td>aaa</td> </tr> </table> </div>
- ベストアンサー
- CSS
- CSSをどう書けばいいでしょうか？
CSSをどう書けばいいでしょうか？ 以下のhtmlを想定しています。flashの表示位置はウインドウの上下中央センターに表示させたいと思っております。 footerは常にページの下部に表示させる予定です。 ページ上にコンテンツが少ないのでスクロールするまでもない状態なのでこのような表示位置を実現したいのですがどのようにすればいいでしょうか？ 下記に書いているCSSに添削をお願いいたします！ #flash { margin: 0 auto; width: 960px; height: 450px; } #footer { margin: 0 auto; width: 960px; height: 150px; } <div id="flash">上下左右の中央に表示されるコンテンツ</div> <div id="footer">常にページ下部に表示されるコンテンツ</div>
- ベストアンサー
- 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で中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを１０２４×７６８から１２８０×１０２４に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 － 画面サイズを変更すると位置がずれてしまうソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- － 検索でヒットした位置指定のソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ －
- ベストアンサー
- HTML
- CSSでロールオーバーを作って中央揃えにしたい。
CSSを使ってロールオーバーを作成しました。 がんばっているのですが、なかなか難しく、壁ばかりです。 なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。 どなたか、お力をお貸しください。よろしくお願い致します。 HTML ----------------------------------- <link href="css.css" rel="stylesheet" type="text/css"> <div class="contents_box2"> <h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3> <p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2"><br /> <div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div> <img src="contents_img2_3.jpg" width="215" height="18" /></div> -------------------- css↓↓↓ ------------- BODY { COLOR: #666666; TEXT-ALIGN: center; margin-top: 0px; font: 12px/130% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; margin: 0px; padding: 0px; } .contents_box2 { FLOAT: left; MARGIN: 0px 12px 0px 0px; WIDTH: 215px; TEXT-ALIGN: left; padding: 0px; background: url(contents_img2_2.jpg) repeat-y; } .contents_text2 { MARGIN: 10px 16px 0px } .contents_detail { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 215px; PADDING-TOP: 0px; TEXT-ALIGN: center } .rollover01 { width:172px; height:29px; background:url(img/button3.jpg) no-repeat center bottom; text-align: center; } .rollover01 a { display:block; width:172px; height:29px; font-size:1px; line-height:1px; outline:none; text-align: center; } .rollover01 a:hover { text-indent:-9999px; } -------------------------------------
- ベストアンサー
- その他([技術者向] コンピューター)
- 外部CSSの一部が反映されません。
ホームページビルダーとメモ帳でサイトを作っています。 外部スタイルシートを指定したのですが、一部分だけ反映されません。 反映されないのは下二行のテーブルへのclass指定です。 CSSは以下になります。 * { margin : 0 ; padding : 0 ; } body{ width :100% ;} body,table {font:normal 13px;} table {margin : 0 ; padding : 0 ;} #my_body { margin: 0 auto; width : 700px ; } #my_navigation { float : left ; width : 150px;} #my_contents { float : left ; width : 550px ;} #my_header { width : 100% ; height : 97px;} #my_footer { width : 100% ; clear : both;} /*リンク*/ A:HOVER{color : #006500;text-decoration : none;} A{color : #00a600;text-decoration : none;} /*指定テーブル内*/ table.a01{width:150;background-color:#cccccc;} html内には <TABLE class="a01"> のように記述しています。 試しにCSSの下一行以外の全ての記述を削除してみても反映されません。 tableでなく、tdで指定してみても反映されません。 ビルダーのページ指定画面では反映されるのですが、プレビュー画面や アップロード後のIE7やFierfoxで見ると反映されていません。 同じ記述をhtml内に<style type="text/css">で指定すると反映されます。 CSSに詳しい方いらっしゃいましたら、どうかよろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳについて
CSSで下記のように記載すると高さ200pxのボーダ枠の中にaaaaaと記載されるのまでは、よいのですが、上詰めになってしまうのです。高さ200pxの中央に表示させるにはどうしたらよいのでしょうか。 どうぞよろしくお願いいたします。 ▼CSSソース -------------------------- #contents{ border: solid 1px #ccc; margin: 0; padding: 0; width: 500px; height: 200px; text-align: center; } -------------------------- ▼HTMLソース <div id="contents">aaaaa</div> --------------------------
- 締切済み
- CSS
- CSSでの背景色設定とIE6.0での表示について
お世話になります。 全くの初心者ですが、Golive7.0の体験版を使ってHP作りに挑戦しています。 過去ログで調べてもわからなかったので教えて下さい。 使用OS : Windows XP (1) HTMLで表示する文章を作り、CSSファイルで、divブロック（class=contents）内の背景や文字色などは設定できましたが、ページ全体のbodyに適用させる背景色は反映されません。 body { background-color: #E7FAEE; } HTMLソースの方に直接上記の設定を指定すると反映されました。 参考にしている入門書にはCSS内で記述するように書かれていますが、何か忘れていることなどがありますでしょうか？ CSSファイルのリンク設定はちゃんと反映されています。 (2) divブロック（contents）を画面の真ん中に配置するよう、 .contents { text-align: center; width: 600px; margin:auto; } と設定しましたが、IE6.0では画面の左端に寄っています。 ネットスケープ7.1ではきちんと中央に表示されます。 入門書には、『HTMLソースに<div class="contents">を入れないとIE5.xでは幅が固定されません』とあり、そこも記述してあります。 サーバーに上げてもプレビューと同じく反映されていませんでした。 5.xバージョンではないのに反映されないのはなぜでしょうか？ 以上、どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
お礼
IEのバグの件はどこかでちらっと見かけたのですが、それへの対処が不明でもありました。 お蔭様でCSSでサクっと希望通りできました！ありがとうございます！