- ベストアンサー
td要素内のdiv要素をセンタリングしたい
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
結果どうしたいのか不明ですが、 ＞div要素をセンタリング aをセンターリングするのではなく、”div要素”をセンタリングですね？ その例だと、 <td style="padding: 0 100px;"> 等で簡単で済みそうですが・・・ 見た目同じでも、本来のセンターリングの意味にはならないので以下で。 まずは、貴方のHTMLは間違っています。 <div><a href="#"></div> この↑divの中身は一体何でしょう？ ここの質問だけの例だとしても適切に書きましょう。 <div><a href="#">例</a></div> #1の方の回答では、divはセンターリングされません。 div内のインライン要素（文章など）はセンターリングになりますが ブロック要素は、腐ったブラウザを除いてセンターリングされない・・・ divに罫線（枠のborder）を入れると理解できるでしょう。 箱を移動させる？ 物を移動させる？ この違いです。どちらかな？ #2の方のは、〆のHTMLが間違かな・・・ divはブロック要素なので、デフォルトでは幅が100％になります。 幅が100％なのだから、右も左もセンターもありません・・・ |｜大大大大大大｜ ← 幅が大きいと移動できない。 | ｜小｜ ← 幅が小さいと移動できる。 なので、 td内で、divのボックス自体が遊べるように、 tdの幅よりもdivの幅を小さくするのが第一条件です。 次に、 divの左右を margin:auto; にする。 例： <td style="width:200px;"> <div style="width:100px; margin:auto; border:1px solid red;"> <a href="">例</a> </div> </td> これで、中身のインライン要素が左（デフォルトなら）のままで、 divだけがセンターに配置されます。 外部CSSなら（数値は適当） td{ width:200px;} td div{ width:100px; margin:auto;} 因みに、上記ができなければ、 過去モードの可能性があるのでハックなどの別途対応が必要です・・・ <td style="width:200px; text-align:center;"> <div style="width:100px; margin:auto; text-align:left; border:1px solid red;"> <a href="">例</a> </div> </td> あとは応用とか、「CSS センターリング」で検索するとか。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
divは汎用ブロック要素ですから、ブロック要素をそれが含まれるブロック内で中央に配置するときには、自身の巾を指定して左右のマージンをautoにすると中央に配置されます。 td{width:10em;} td div{width:6em;margin-right:auto;margin-left:auto;} です。 行内要素は、text-align:center;で中央寄せするのとは異なります。 ★ただし、「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」は、とても重要な守るべきルールです。 表は二次元データを並べるためのもので、デザインのために使用すべきではありません。 また、divは「複数のブロックをグループ化するときや、他に適切な要素がないときに使用する最終手段」です。tableと同様にデザインのためだけに使用するものではありません。--HTML5では、ここはより厳しくなります。 <td> <p><a href=""></a></td> </td> で良い場合が多いのでは？
お礼
プログラムの要件にて、DIVが必要だったもので。 別の方法で対応致しました。 ご回答ありがとうございました。
- too_bad
- ベストアンサー率53% (70/130)
HTML部分 <table> <tr> <td class="cen"> <div><a href="#"></div> </td> </tr> </table> CSS部分(外部CSSの場合) td.cen { text-align: center; } CSS部分(内部CSSの場合) <head> <style type="text/css"> <!-- td.cen { text-align: center; } --> </style> </head> それから、アンカーリンクの前にDIVを挟まなくてもセンタリングはできるかと＾＾； 改行目的のDIVであるのであれば、大人しく CSS部分(外部CSSの場合) td.cen { text-align: center; padding-top: 16px; } CSS部分(内部CSSの場合) <head> <style type="text/css"> <!-- td.cen { text-align: center; padding-top: 16px; } --> </style> </head> などとされたほうがよろしいかと。
お礼
プログラムの要件にて、DIVが必要だったもので。 別の方法で対応致しました。 ご回答ありがとうございました。
関連するQ&A
- FireFox2.0でCSSを使ってテーブルそのものをセンタリングしたい
IE６だと #wrapper { text-align: center; } <div id="wrapper"> <TABLE border="1"> <tr><td>テキスト</td></tr> </table> </div> とやればテーブルそのものがセンタリングされるのですが、 FireFox2.0だと左に寄ったままです。 CSSを使わずに<center>で囲めばセンタリングされますが、 そうではなくてCSSを使ってやるやり方はないでしょうか？
- ベストアンサー
- HTML
- 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>
- 締切済み
- その他([技術者向] コンピューター)
- ＤＩＶのセンタリング
<table>を使うとセンタリングできるのですが、 <div>を使うとセンタリングできません。(IEだとセンタリング出来てますが、firefoxで確認した場合センタリング出来てません。) どうやってセンタリングできるのかご存知の方いらっしゃいましたら、 申し訳御座いませんが、ご教授願いますでしょうか 宜しくお願い致します。
- ベストアンサー
- HTML
- Table内TDの子要素を移動させたいのですが・・
初心者的な質問になるかもしれませんが、宜しくお願いします。 唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。 <DIV>.....</DIV> ← (*) <Table> <TR> <TD> ← (1) <SCRIPT ........</SCRIPT> <A HREF="">........</A> <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (2) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (3) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> </TABLE> (1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。 この(1)～(3)のTDの子要素部分だけを抽出し、(*)の DIVタグの真下に移動させるようなjquery文を作りたいのですが、 http://d.hatena.ne.jp/replication/20120113/1326382090 等の記事を参考に、 var cells, tblcell; // テーブルタグを探して、１番目のテーブルを取得する var rows = $("table")[0].rows; // 列を１つずつ取り出す $.each(rows, function(i) { cells = rows[i].cells; // 行を１つずつ取り出す $.each(cells, function() { // tdタグの値を書き換える tblcell = $(this).detach(); console.log(tblcell); // tdタグのスタイルシートを書き換える $('div').after(tblcell); }); }); このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。 そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、 中々うまいやり方がみつかりません・・・ なにか、よい方法はございませんでしょうか？
- ベストアンサー
- JavaScript
- センタリングしたページの印刷
センタリングをしたページを作成していますが、印刷をする際(用紙方向縦)には左寄せで印刷できるようにしたいと思っています。 例としては、e-bankさんのトップページを考えています。e-bankさんのトップページを印刷プレビューしていただくとお分かりいただけるかと思いますが、ブラウザで表示される際はページ全体がセンタリングされていて、印刷する際はセンタリングが解除されて(??)、ページ全体が切れることなく印刷されます。 http://www.ebank.co.jp/ ただ、私が作成したhtmlファイルですと、印刷(プレビュー)した際も、センタリングされたままの状態で、左に余白がありページ(横幅700pix)が途中で切れてしまいます。 hemlファイルには、 ～前略～ <body> <center> <table width="700" border="0" cellpadding="2"> <tr> <td bgcolor="#993300">あ</td> <td bgcolor="#993300">い</td> </tr> </table> </center> </body> ～後略～ もしくは、 ～前略～ <body> <div align="center"> <table width="700" border="0" cellpadding="2"> <tr> <td bgcolor="#993300">あ</td> <td bgcolor="#993300">い</td> </tr> </table> </div> </body> ～後略～ と記述してセンタリングしましたが、どちらも印刷の際もセンタリングされたままでした。 どうしたらe-bankさんのトップページのように、左に余白が入らずページ全体が印刷されるようになるでしょうか…。ご存知の方がいらっしゃいましたら、宜しくお願いします。
- ベストアンサー
- HTML
- CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？
CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？ 例えば、HTMLで一行に3列になるよう以下の様に記述した時に <table> <tr> <td> <p>テキスト左</p> </td> <td> <p>テキスト中</p> </td> <td> <p>テキスト右</p> </td> </tr> </table> CSSでのそうさのみによって 見栄え的に縦3行、横1列に見えるようにできますでしょうか？ 幅などをピクセル制限したりするのでも構いません。 もしHTMLで実現するとするならば <table> <tr> <td> <p>テキスト左</p> </td> </tr> <tr> <td> <p>テキスト中</p> </td> </tr> <tr> <td> <p>テキスト右</p> </td> </tr> </table> 上記のような記述になると思いますが、あくまで最初のHTMLをCSSで変更して、HTML本体は書きかえない方法です。 もし、何らかの形で実現できそうな場合がありましたらアイディアをください。 お忙しいところお手数おかけしますが、よろしくお願いいたします。 ※CSS記述の変更のみ。 ※特定のブラウザに依存させたくない。 ※Javasprictは使用しない。
- 締切済み
- HTML
- td:nth-childを使ってa要素を取得したい
<table> <tr> <td>右がリンクになります</td> <td><a href="http://www.com">ウェブサイト</a></td> </tr> <tr> ： ： </tr> </table> というテーブルがあります。 このとき、たとえば一番上の行では"td:nth-child(1)"だと"右がリンクになります"、"td:nth-child(2)"だと"ウェブサイト"に該当しますが、"http://www.com"を取り出したい場合はなんと打てばいいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSのdivで何故かボックスセンタリング出来ない
CSSのdivで何故かボックスセンタリング出来ません。全体を中央に寄せたいと思っています。 質問させていただきます。 まず、全体をdivで囲い、 #contena { margin-right: auto; margin-left: auto; width: 1000px; height: 1000px; } と、記述したのですが、何故かボックスセンタリングになりません。 しかも、ナビゲーションだけ、センタリングされています。 下記に、htmlを記述します。4000文字入るはずですが、これも何故か400文字程の数が入りきらないので、途中まで記載します。詳しい方がいましたら、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>名称未設定-1</title> <link rel="stylesheet" type="text/css" href="./index.css" media="all"> <!--[if IE]> <style type="text/css" media="all">.borderitem {border-style: solid;}</style> <![endif]--> </head> <body> <div id="contena"> <form action="#" method="get"> <div id="Div"> </div> <div id="Div2"> </div> <h3 id="見出し_3"> This Month PicUp </h3> <div class="1"> <p class="lastNode">テキスト </p> </div> <div id="Div3"> </div> <h3 id="見出し_32"> This Month PicUp </h3> <div class="2"> <p class="lastNode">テキスト </p> </div> <div class="Txt_メールアドレス"> <p class="lastNode">メールアドレス </p> </div> <input type="text" name="テキストフィールド__mac" id="テキストフィールド__mac" value=""> <input type="submit" id="ボタン__win" value="送信"> <img src="images/index_r2_c2.gif" alt="" id="index_r2_c2"> <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600"> <!-- fwtable fwsrc="navibarB.fw.png" fwpage="ページ 1" fwbase="navibar4" fwstyle="Dreamweaver" fwdocid = "68549898" fwnested="0" --> <tr> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="99" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="101" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="97" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1"></td> </tr> <tr> <td colspan="8"><img name="navibar4_r1_c1" src="images/navibar4_r1_c1.gif" width="874" height="223" alt=""></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="157"></td> </tr> <tr> <td rowspan="3"><img name="navibar4_r2_c1" src="images/navibar4_r2_c1.gif" width="99" height="343" alt=""></td> <td><a href="index1.html"><img name="navibar4_r2_c2" src="images/navibar4_r2_c2.gif" width="100" height="28" alt=""></a></td> <td rowspan="3"><img name="navibar4_r2_c3" src="images/navibar4_r2_c3.gif" width="1" height="343" alt=""></td> <td rowspan="2"><a href="navibar.html"><img name="navibar4_r2_c4" src="images/navibar4_r2_c4.gif" width="100" height="30" alt=""></a></td> <td rowspan="3"><img name="navibar4_r2_c5" src="images/navibar4_r2_c5.gif" width="2" height="343" alt=""></td> <td rowspan="2"><a href="navibar1.html"><img name="navibar4_r2_c6" src="images/navibar4_r2_c6.gif" width="101" height="30" alt=""></a></td> <td><a href="javascript:;" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','navibar4_r2_c7','images/navibar4_r2_c7_s2.gif','images/navibar4_r2_c7_s4.gif',1);" onClick="MM_nbGroup('down','navbar1','navibar4_r2_c7','images/navibar4_r2_c7_s3.gif',1);"><img name="navibar4_r2_c7" src="images/navibar4_r2_c7.gif" width="100" height="28" alt=""></a></td> <td rowspan="3"><i
- ベストアンサー
- ホームページ作成ソフト
- JavaScriptで特定のtdタグにclass名をつけたい
指定のdiv内にある一行目（もしくは、最初の3つ）のtdタグに対して JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか？ 【HTML参考】 <div id="box"> <table> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> 上記のような時、div#box内の「セル１～３」に対してclass名を付けたいと言った場合です。 よろしくお願いいたします。
- 締切済み
- JavaScript
- <td> 内のテーブルを上寄せにするには？
すみません教えていただけますか？ 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか？ よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> </td> </tr> </table>
- ベストアンサー
- HTML
お礼
お礼が遅れてすみません。 確かに、ブロック要素とインライン要素の違いでした。 widthを指定してmarginのautoでOKでした。 しょーもない質問ですみません。ご回答ありがとうございました。