- ベストアンサー
text-align: center; 無視される
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
CSS の記述自体に誤りはありません。 他のCSSで設定が上書きされているか、CSS のセレクタの記述 が目的の要素と合っていないかのどちらかと推測されます。 回答No.1 さんがおっしゃるように、『CSSの適用状況を目視 できるツール』を利用して確認されることをお勧めします。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ウェブ製作でしたら開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、そのアドオンに有名な Firebug( https://addons.mozilla.jp/firefox/details/1843 )があります。 それでその要素thをクリックするとスタイルシートの適用が継承順にすべて表示されます。
関連するQ&A
- テーブルのtext-alignがきかない（ＩＥ７）
お世話になります。初心者ですが、アドバイスいただけると助かります。 宜しくお願いします。 セル内のテキストを中央寄せにしたいのですが、 IE7では、下記のソースだと適用されないで困っています。（左寄せになる） （さらに、テキストに対して十分なwidthがあるのに、途中で折り返されて２行になってしまう） Safari、Firefox、Opera（いずれもMac）はOKでした。 例えば．．． ●●●●●● とセルの中に表示したいのに、 ●●●● ●● と途中で折り返されてしまう、（widthは余裕があります） CSS th,td.A{ width:30px; height:35px; text-align:center; } HTML <table> <tr> <td class="A"> ●●●●●●</td> </tr> </table>
- ベストアンサー
- HTML
- tr 無視されます padding
テーブルに対してcssで table[summary="トップページ"] tr{ padding:30px 30px; } は効かないのですか？ table[summary="トップページ"] th{ padding:30px 30px; } や table[summary="トップページ"] td{ padding:30px 30px; } は適用されますが tr だけが無視されます。
- ベストアンサー
- HTML
- CSSでtext-align
不思議な現象が起きてます。 2行7列の表を作って、 2行目の3～5列と7列目を右寄せにしたいがために、 <td class="right"> で外部CSSに .right{ text-align:right; } と記述したところ適用されませんでした。 しかしインラインで <td style="text-align:right;"> と書くと右寄せになるんです・・・ 原因がわからずこまっています。 ちなみに <td align="right"> でも表示されませんでした・・・ table全体には以下のCSSが外部で適用されてます、 div.gray_box { background-color: #FFFFFF; border-color: #CCCCCC; border-style: solid; border-width: 1px; padding: 1px 0 1px 0; } table.wide_table_border { border: 1px solid #FFFFFF; border-collapse:collapse; margin: 0px auto; padding: 5px; width: 100%; } あまり関係ないとは思うのですが一応載せておきます。 目的としては、必ず外部CSSに記述することです。
- ベストアンサー
- HTML
- 画像のtext-align:center;について
http://loveosan0801.uijin.com/content/ishida.html 上記URLの画像がcenterに配置されません。 どのように修正すれば、centerに配置されますでしょうか？ お教えいただけませんか？ body { font-size:14px; line-height:150% } h1 { color:black; border-left:10px solid #cccccc; border-right:10px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; font-size:16px; padding:10px 0 10px 0; text-align:center; } p { text-align:left; border-left:10px solid #cccccc; border-right:10px solid #cccccc; padding:0 0 0 20px; } #center p { text-align:center; } #menu { list-style-type:none; text-align:center; } #menu li { display:inline; border-right:5px solid #cccccc; padding:0 20px 0 20px; } .main { width: 100%; } .main div { width: 50%; margin: 0 auto; }
- ベストアンサー
- HTML
- text-align centerの違い
div内にリンクを書くとセンターを基準に表示されるのですが div内にulとliでメニューを組むとセンターを基準に表示されず 左を基準に表示されてしまうのですがどのようにすれば いいものでしょうか？ ---CSS--- #hoge { width: 1000px; text-align: center; background: #fff; } ---HTML--- ↓この場合センター表示されます。 <div id="hoge"> <a href="#">hoge</a> </div> ↓この場合センター表示されず左を基準に表示されます。 <div id="hoge"> <ul> <li><a href="#">hoge</a></li> </ul> </div>
- ベストアンサー
- HTML
- paddingはテーブルに対して行えないの？
cssのpaddingはテーブルに対して行えないのでしょうか？ table[summary="table_あ"] { text-align: center; padding: 20px 0px; } というcssを設定すると text-align: center; は適用されているのに padding: 20px 0px; は無視されます。 http://www.tagindex.com/stylesheet/table/padding.html を参考にしたのですが、 もしかして、 tableでpaddingは使えないのでしょうか？ 上下のみ空白が欲しいので20px 0pxとしました。
- ベストアンサー
- HTML
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- text-alignの解除の方法
text-alignの解除の方法ってありませんか？ 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px; position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか？ IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。
- 締切済み
- HTML
- 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
- 表をtext-alignで中央に出したい・・・
こんな↓HTMLを書いているのですが、表がFirefox3.5の場合 中央に寄ってくれません。IE6なら寄ってくれるのですが・・・ CSSやHTMLの文法的な部分では誤りがないことを確認したのですが、 どうすればFirefoxでも表を中央に出せるでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html;charset=EUC-JP"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="index" href="./"> <link rev="made" href="mail"> <style type="text/css"> <!-- .main{ text-align:center; } --> </style> <title>テーブル表示</title> </head> <body> <div class="main"> <table summary="chart 1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> </body> </html>
- ベストアンサー
- HTML
