• 締切済み

DIVタグでの表のセンタリング

KKatohの回答

  • KKatoh
  • ベストアンサー率32% (11/34)
回答No.1

ブロック要素に対してなら、スタイル指定に、 margin-right:auto; margin-left:auto; を指定すれば、センタリングされると思います。 質問者さんの質問に対する、直接の回答になっておりませんが、いかがでしょうか?

ushisan
質問者

お礼

 ありがとうございました。ブロック内の全てをCSSで指定したかったのですが、DIVタグは無理なようなので、CENTERタグですることにしました。

関連するQ&A

  • センタリング表示

    イラストレータでデザインし、スライスしてCSSでWeb用に保存。 ホームページビルダー11で編集していますが、センタリング表示が出来ません。 下記のようなタグを入れましたがNGでした。 <body> <div align=”center”> ・・・ ・・・ ・・・ </div> </body> 次のタグでも同様でした。 <body> <center> ・・・ ・・・ </center> </body> なるべくテーブルにはしたくないので、解決策をご指導下さい。

  • HTML?スタイルシートの表センタリングについて

    以下のSampleでやってみましたが、うまくセンタリング できません。 表をPageの真ん中に置いて かつ、表の中のセル内、文字列は左によせるには どうしたらよいのでしょうか? またこのような作業、確認は皆さんどうやって書いているのですか? ホームページビルダーでしょうか? 常に表には苦労しています、今までは<CENTER>を使っていました。キレイなHTMLを勉強しようとしているのですが 非常に難しいですね。よい方法ないでしょうか? スタイルシート部分: <style type="text/css"> div.ctable { text-align: center; /* IEでセンタリングさせる方法 */ } div.ctable table { margin: auto; /* 標準のセンタリング方法 */ text-align: left; /* IE用方法の弊害対策用 */ } </style> HTML部分: <div class="ctable"> <table> <tr><th>スタイルシート</th><th>センタリング</th></tr> <tr><td>CSS</td><td>Centering</td></tr> </table> </div>

  • div要素をセンタリング

    <div style="width:300px; text-align:center; border:1px dashed red;"> この文字は中寄せ <div style="width:200px; border:1px dashed green;"> このボックスも中寄せ </div> </div> このようなHTMLを表示すると、 IEでは、赤い枠の左右中央に緑の枠が入り、「この文字は中寄せ」という文字と、緑の枠が縦にきれいに並ぶのですが・・ネスケやOperaでは、緑の枠が左に寄ってしまいます。 これを、中央に寄せる方法はないでしょうか? (表示が遅くなるのを防ぐために、テーブルは使いたくありません)

    • ベストアンサー
    • HTML
  • IE8ではtext-align: center;でdivタグが中央にならない。改善策は?

    IE8ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。 http://oshiete1.watch.impress.co.jp/qa4989799.html 上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。 CSSでは以下のように記述: div.center { width: 80%; margin-right: auto; margin-left: auto; } HTMLではセンタリングさせたいdiv要素を以下のように記述: <div class="center">文章等<div> <質問1> ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div> を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか(width: 80%はdivタグのセンタリングには特に必要ないのですか?なぜ、width: 80%が記述されているのか分かりません。)?この80%という値はどこから導き出されたのでしょうか(なぜ、例えば60%、70%等ではだめなのですか?)? また、bodyタグをセンタリングしたい場合は、どうですか?CSSにwidth: 80%;が必要なのでしょうか? <質問2> 「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか?margin:0 autoの場合、上下のマージンも0(無し)となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが?「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか? また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか? <divタグをセンタリングしたい場合> CSSでは以下のように記述: div.center { width: 80%; margin:0 auto } 上記の記述で div.center { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか? <bodyタグをセンタリングしたい場合> CSSでは以下のように記述: body { width: 80%; margin:0 auto } 上記の記述で body { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか? <質問3> IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか? 以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか? { text-align: center; margin-right: auto; margin-left: auto; } 又は { text-align: center; margin:0 auto; } 関連サイト等あれば、そちらも教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSのセンタリングが、「div」で何故か出来ない

    下記のアドレスのホームページについてです。 http://sky.geocities.jp/thanksv0358/index.html# HTMLで、 <body> <div id="main"> ~ </div> </body> とし、CSSで #main{ text-align:center; margin-left:auto; margin-right:auto; text-align:left; } としたにもかかわらず、何故かセンタリングができません。 今回、最初の<!DOCTYPE~の部分から全部、自分で書いてみました。 詳しい方がいましたら、よろしくお願いします。

  • IEでCSSを用いてテーブルをセンタリングしたい。

    という質問内容なのですが・・・ 条件は、  Windows 3.1/NT3.51 IE4~IE5 Win32 IE4~IE5.0x でCSSだけを用いてセンタリングしたいのですが どうしてもうまくいかないのです・・・ IE用では <DIV style="text-align: center"> CSS準拠では <TABLE style="margin-left: auto; margin-left: right"> があります・・・ 上記は、IE5.5、IE6、ネスケ6、7、もじら、Opera6,7で 確認してます。 CSSのみの利用なので、<CENTER>、<DIV align="center">は使わない方法で 知ってる方はいらっしゃいませんか?

  • CSSで画像を中央配置(センタリング)する方法について伺います。

    CSSで画像を中央配置(センタリング)する方法について伺います。 ※ボックスのセンタリングではなくて、ボックス内の画像のセンタリングです。 単純に text-align:center; で中央配置されましたが、テキストが入っていないボックスでも、このタグで文法的には問題ないのでしょうか? header内にphoto.gif画像が入っている場合。 CSS #header{text-align:center;} HTML <div id="header"> こんな単純で良いのでしょうか? 初心者なので、とんちんかんな質問だったら申し訳ありません。

    • ベストアンサー
    • HTML
  • div style 簡素化するには?

    <div style="text-align:center;" style="font-size:50%;"> を簡素化するにはどうすればいいでしょうか? <div style="text-align:center;" "font-size:50%;"> にしたら、うまく表示されませんでした。

    • ベストアンサー
    • HTML
  • PHPで携帯サイト <div text-align:center>が適用されない

    PHPで携帯サイトを作っているのですが 部分的にテキストをセンタリングや背景色を設定したいのです。 機種はFOMA 700iです。通常は<div text-align:center>が適用されないのですが、 他のページでセンタリングされているのを見ます。 何か工夫されていると思いますが どなたか裏技的な事ご存知でしたら教えて頂けますか?

    • 締切済み
    • PHP
  • CSS/float内のセンタリング

    下記の記述でsideconteをsideWrap内にセンタリングしたいのですが、うまくいきません。sideWrap内に記述したテキストはセンタリングされるのですが、sideconteは思った通りに、配置できません。どのように記述すれば、よいでしょうか? <html lang="ja"> <head> <style type="text/css"> #sideWrap { width:220px; float:right ; background-color: #fec000; text-align:center; } .sideconte { width:175px; background-color:red;text-align:center;} </style> </head> <body> <div id="sideWrap">text1 <div class="sideconte"> text2 </div><!-- /sideconte --> </div><!-- /sideWrap --> </body> </html>

    • ベストアンサー
    • HTML