- ベストアンサー
テーブル自体を中央に表示する場合は
cssでテーブルの中の文字を中央に表示させるときは text-align: center; を使いますが、 テーブル自体を中央に表示する場合は margin-left:auto;margin-right:auto; を使うみたいですが、 なぜ text-align: center; ではだめなのでしょうか？ テーブル自体がテキストじゃないからですか？
- adjeummply
- お礼率94% (63/67)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
table=表に、text-align:center;を指定すれば、table内の文字は、当然ですが、center割りつけになります。 テーブル全体を、center割り付けにするには、table自体を内包する入れ物が必要になると考えれば、簡単に理解できると思います。 そのために、仮に、入れ物の名前を、box1 としてみましょう。 .box1{ text-align:center; padding:10px; } .box1 summary{ font-size:80%; color:#ff0000; } などと、cssに記述しておき、HTMLは、下記のように記述します。 <section class="box1"> <table border="1" summary="表１"> </table> </section> HTML5以前の記述の場合は、section⇒div ということになります。
その他の回答 (2)
HTMLの要素は2種類あります。ブロック要素とインライン要素というものです。 ●インライン要素とブロック要素 http://taneppa.net/display-inline-block/ ●text-alignについて https://developer.mozilla.org/ja/docs/Web/CSS/text-align CSSのtext-alignですが、インラインが対象になりますので、ブロック要素であるTableには効きません。 最新版のHTML5ではまた少し話が違ってくるのですが、それはおいおい知ればよいと思います。 ご参考ください。
お礼
ご回答ありがとうございました。
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
text-alignはブロック要素には使えません。 これが答えです。
お礼
ご回答ありがとうございました。
関連するQ&A
- スクロールバーによって表示がズレます。
下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。（IEはOKなのですが・・・） どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }
- ベストアンサー
- HTML
- テーブルを中央に表示させる場合
cssでテーブルを中央に表示させる場合、 http://www.1uphp.com/con1/table/align-center.html のサイトでいうと、 １．<div>の中身をtext-align:center;で中央に表示 ２．中央表示されないブラウザ(FirefoxOpera)に対してmargin-方向:auto;を設定 のどちらの方法で指定したほうがいいのでしょうか？ 万人向けのサイトを作ってるのでブラウザはまちまちなのですが そのような場合のタグの書き方を教えてください。
- ベストアンサー
- CSS
- CSSでボックスを中央に表示させたい
CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。
- ベストアンサー
- CSS
- IE８ではtext-align: center;でdivタグが中央にならない。改善策は？
IE８では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%;が必要なのでしょうか？ ＜質問２＞ 「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で、全体を中央寄せ、文字は左寄せにする方法
CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。 bodyにtext-align: centerを設定し、 #outline{ width:1200px; margin-right:auto; margin-left:auto; text-align:left; } .content{ float:left; width: 1200px; } と書き、<div id="outline"><div class="content">で全体を囲みました。 すると、大方できたのですが、h要素のみずれてしまいます。 （h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・） h要素は色とフォントサイズを指定したのみです。 CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。 どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- 全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。 ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。 ブラウザで比較してみると、 ■IE7 body { text-align: center }で、中央揃え div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか？ 回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>
- ベストアンサー
- HTML
- ページ全体を中央に表示したい
ページ全体を中央に表示したいので http://www.1uphp.com/con2/layout/bodycenter.html の通りにコードを張り付けたのですが、全体が若干左に寄ります。 どこを修正すればいいのでしょうか？ body { margin:0px; /* ページ全体のmargin */ padding:0px; /* ページ全体のpadding */ text-align:center; /* 下記のautoに未対応用のセンタリング */ } #main { margin-left:auto; /* 左側マージンを自動的に空ける */ margin-right:auto; /* 右側マージンを自動的に空ける */ text-align:left; /* 中身を左側表示に戻す */ width:650px; /* 幅を決定する */ } この通り貼り付けました。
- ベストアンサー
- HTML
- cssで画像を中央に表示する方法
http://wayohoo.com/programming/css/how-to-center-the-img-tag.html を参考にしたのですが、 「imgをdivで囲って画像を中央揃えする方法。」なら、画像を中央に表示できるのに、 「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 【サンプル】 <style type="text/css"> img.line{ width: 700px; margin-left: auto; margin-right: auto; } div.center{ text-align: center; } </style> </head> <body> <img class="line" src="http://test/line.jpg"> <div class="center"><img src="http://test/line.jpg" /></div> </body> のように２つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか？
- 締切済み
- CSS
- コマンドボタンを中央に表示したい
<html> <head> <title>test</title> <style type="text/css"> <!-- div.div_center { margin-left: auto; margin-right: auto; } --> </style> </head> <body> <div class="div_center"> <button type="button" onclick="window.open('http://www.google.co.jp/','_blank');">google</button> </div> </body> </html> なぜこのコードではコマンドボタンは中央に表示されないのでしょうか？ margin-left: auto; margin-right: auto; これは違いますか？
- ベストアンサー
- CSS
- 文字を中央表示にしたいのですが
文字を中央表示にしたいのですが、真ん中より右側にずれてしまいます。 タグのどこが悪いのかわかりませんので、教えていただけませんでしょうか。 ＜HTMLタグ＞--------------------------------- <table cellpadding="0" cellspacing="0" id="image"><tr><td valign="bottom"> <ul> <li><a href="home.html">ホーム</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="info.html">お問い合わせ</a></li> </ul> </td></tr></table> -------------------------------------------------- ＜cssタグ＞-------------------------------------- #image{ border:none; background:url('img/bannar.bmp') no-repeat left top; margin-left: auto; margin-right: auto; width:600px; height:258px; text-align: center; } #image td{ margin:auto; } #image ul{ list-style-type:none; } #image li{ width:150px; margin:10px; padding:0; background-color:#fff; font-size: 14px; text-align:center; text-decoration:underline; } ----------------------------------------
- ベストアンサー
- HTML
お礼
ご回答ありがとうございました。